首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
确定删除此收藏集吗
删除后此收藏集将被移除
取消
确定删除
确定删除此文章吗
删除后此文章将被从当前收藏集中移除
取消
确定删除
编辑收藏集
名称:
描述:
0
/100
公开
当其他人关注此收藏集后不可再更改为隐私
隐私
仅自己可见此收藏集
取消
确定
Canvas 基础教程
订阅
BobChen
更多收藏集
微信扫码分享
微信
新浪微博
QQ
7篇文章 · 728订阅
一个比想象中更骚气的圆-svg实现
之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环),其实SVG也可以实现类似的效果,而且两者api惊人的相似。 关于SVG SVG是一种矢量图形,在图形改变尺寸的情况下质量不会损失。 相比canvas,svg有一个很大的优势就是内联进html的时候可以像操作dom…
tips - 解决 base 标签造成 SVG 效果失效
之前写了使用SVG实现一个骚气的圆环: 一个比想象中更骚气的圆-svg实现。后来上线过程中发现渐变的效果出不来,原来是html base标签和内联SVG同时使用引起的一个坑,略偏,记录一下。 base标签 base 标签为页面上的所有链接规定默认地址或默认目标。通常情况下,浏览…
Canvas 画图基础
Canvas 是 HTML5 的新东东,提供 javascript 接口来绘制各种图形,本文简单介绍了 Canvas 画图基础的几个小点和需要注意的地方。
不一样的动图-APNG
动图 说到动图,首先我们想到的 GIF 格式,GIF 在网络上流行已久,各种动态表情包都是 GIF 图做的。但是 GIF 的缺点也很明显,透明背景的 GIF 无法做到像素的绝对平滑过度,于是乎我们可以看到带透明的 GIF 图周围杂边非常明显,如下: 不一样的动图-APNG 通常…
Canvas 画图 - 鼠标移动图形
之前那篇Canvas画图-鼠标涂鸦已经可以实现与Canvas的简单交互,这篇会介绍Canvas中实现交互性的一个重要方法isPointInPath。 基本原理 Cavnas的确能实现很多很酷炫狂拽屌炸天的效果,但是交互性要差很多,简单的鼠标单击选中某个图形,都要花费一番周折。 …
Canvas画图-鼠标涂鸦
之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环),后面又写了使用SVG实现的方法 一个比想象中更骚气的圆-svg实现, 这篇继续学习和Canvas有关的知识,这篇类似之前的一个总结,主要是用鼠标在Canvas上涂鸦,以及保存涂鸦为图片。 鼠标事件 整个原理比较简…
Canvas画图-一个比想象中更骚气的圆(渐变圆环)
之前介绍了Canvas画图基础,这篇介绍一下画一个带渐变效果的圆。 一个渐变的圆环 渐变色应用广泛,和圆环结合做进度条非常酷,今天我们就来画一个这样的圆环: Canvas渐变 在Canvas画图基础中我们知道给canvas上色主要是ctx.fillStyle和ctx.strok…