超多经典 canvas 实例
普及：<canvas> 元素用于在网页上绘制图形。这是一个图形容器，您可以控制其每一像素，必须使用脚本来绘制图形。
注意：IE 8 以及更早的版本不支持 <canvas> 元素。
贴士：全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special
尤雨溪个人主页炫彩三角纽带效果，点击还可变换
知乎登录注册页动态离子背景效果
基于 canvas 的五子棋完整功能实现
基于 canvas 的《是男人就下100层》小游戏完美实现
毛笔字书写田字格，可以写字
随心而动，随刃而行。输入文字显示动画粒子特效
鼠标移动炫彩小球
2048
贪吃蛇
看你有多色
坦克大战
宇宙行星旋转特效
支付宝咻咻咻动画特效
程序员表白代码
心形文字
照片墙
License
The code is available under the MIT license.
<marquee>不断更新，欢迎补充！</marquee>
!
image
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
image
arc()、arcTo()
context.arc(x,y,r,sAngle,eAngle[,counterclockwise]); 创建弧/曲线（用于创建圆形或部分圆）
context.arcTo(x1,y1,x2,y2,r); 创建两切线之间的弧/曲线
ctx.beginPath();
arc(100, 75, 50, 0*Math.PI, 1.5*Math.PI)
ctx.stroke();
image
ctx.beginPath();
ctx.moveTo(20,20); // 创建开始点
ctx.lineTo(100,20); // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120); // 创建垂直线
ctx.stroke(); // 进行绘制
clip()
clip() 从原始画布剪切任意形状和尺寸的区域
// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
isPointInPath()
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50)) {
ctx.stroke()
}
转换
scale()
scale() 缩放当前绘图至更大或更小
// 绘制矩形，放大到 200%，然后再次绘制矩形：
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
rotate()
rotate() 旋转当前绘图
// 将矩形旋转 20 度：
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50,20,100,50);
translate()
translate() 重新定义画布上的 (0,0) 位置
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
transform()、setTransform()
context.transform(a,b,c,d,e,f); 替换绘图的当前转换矩阵
context.setTransform(a,b,c,d,e,f); 将当前转换重置为单位矩阵。然后运行 transform()
文本
font、textAlign、textBaseline
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
fillText()、strokeText()、measureText()
context.fillText(text, x, y, maxWidth); 在画布上绘制被填充的文本
context.strokeText(text,x,y,maxWidth); 在画布上绘制文本（无填充）
context.measureText(text).width; 返回包含指定文本宽度的对象
ctx.font="30px Arial";
ctx.fillText("Hello World", 10, 50);
ctx.font="40px Arial";
// 创建渐变
var gradient=ctx.createLinearGradient(0, 0, myCanvas.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变填色
ctx.strokeStyle=gradient;
ctx.strokeText("Hello World", 10, 90);
图像绘制
drawImage()
context.drawImage(img,x,y,width,height); 向画布上绘制图像、画布或视频
var img=document.getElementById("tulip");
ctx.drawImage(img, 10, 10);
像素操作
width、height、data
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象，其包含指定的 ImageData 对象的图像数据
createImageData()、getImageData()、putImageData()
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上
合成
context.globalAlpha = number; 设置或返回绘图的当前 alpha 或透明值
context.globalCompositeOperation="source-in"; 设置或返回新图像如何绘制到已有的图像上
其他
save()、restore()
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
getContext
let cxt = Canvas.getContext('2d')
为不同的绘制类型 （2d、3d） 提供不同的环境，当前唯一支持的是 2d 环境
网友评论