基础
canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。
<canvasid="myCanvas"width="200"height="100"style="border:1px solid #000000;">你的浏览器不支持 canvas，请升级你的浏览器。</canvas><!-- 需要指定一个id以便脚本中访问使用 默认 width为300、height 为 150，单位都是 px 当浏览器不支持该标签时，会显示替代内容 --><!-- 检测支持性 --><canvasid="tutorial"width="300"height="300"></canvas><scripttype="text/javascript">functiondraw(){varcanvas=document.getElementById('tutorial');if(!canvas.getContext)return;varctx=canvas.getContext("2d");//开始代码}draw();</script>varc=document.getElementById("myCanvas");// 获取对应元素varctx=c.getContext("2d");/* getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。*/ctx.fillStyle="#FF0000";// 上色ctx.fillRect(0,0,150,75);// fillRect(_x,y,width,height_) 方法，绘制矩形，xy为左上角点的坐标绘制矩形
=canvas=只支持一种原生的图形绘制：矩形。
canvas 提供了三种方法绘制矩形：
- 1、fillRect(x, y, width, height)：绘制一个填充的矩形。
- 2、strokeRect(x, y, width, height)：绘制一个矩形的边框。
- 3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
绘制路径
所有其他图形的绘制都至少需要生成一种路径(path)。
一个路径，甚至一个子路径，都是闭合的。是线段或曲线相连形成的不同形状的点的集合。
beginPath()
新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径moveTo(x, y)
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。closePath()
闭合路径之后，图形绘制命令又重新指向到上下文中stroke()
通过线条来绘制图形轮廓fill()
通过填充路径的内容区域生成实心的图形
// 绘制三角形空心/实心functiondraw(){varcanvas=document.getElementById('tutorial');if(!canvas.getContext)return;varctx=canvas.getContext("2d");ctx.beginPath();ctx.moveTo(50,50);ctx.lineTo(200,50);ctx.lineTo(200,200);ctx.closePath();//虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形ctx.strokeStyle="#FF0000";// "rgb(255.255.255)"// 上色ctx.stroke();//描边。stroke不会自动closePath()/* ctx.fillStyle = "#FF0000"; // 上色 ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。 */}draw();状态存储和恢复
Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。
一个绘画状态包括：
- 当前应用的变形（即移动，旋转和缩放）
strokeStyle,fillStyle,globalAlpha,lineWidth,lineCap,lineJoin,miterLimit,shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor,globalCompositeOperation 的值- 当前的裁切路径（
clipping path）
可以调用任意多次save方法(类似数组的push())。restore则类似数组的pop()。
varctx;functiondraw(){varcanvas=document.getElementById('tutorial');if(!canvas.getContext)return;varctx=canvas.getContext("2d");ctx.fillRect(0,0,150,150);// 使用默认设置绘制一个矩形ctx.save();// 保存默认状态1ctx.fillStyle='red'// 在原有配置基础上对颜色做改变ctx.fillRect(15,15,120,120);// 使用新的设置绘制一个矩形ctx.save();// 保存当前状态2ctx.fillStyle='#FFF'// 再次改变颜色配置ctx.fillRect(30,30,90,90);// 使用新的配置绘制一个矩形ctx.restore();// 重新加载之前的颜色状态2ctx.fillRect(45,45,60,60);// 使用上一次的配置绘制一个矩形ctx.restore();// 加载默认颜色配置1ctx.fillRect(60,60,30,30);// 使用加载的配置绘制一个矩形}draw();变形
varctx;functiondraw(){varcanvas=document.getElementById('tutorial1');if(!canvas.getContext)return;varctx=canvas.getContext("2d");ctx.fillStyle="red";ctx.save();ctx.translate(100,100);//移动原点ctx.rotate(Math.PI/180*45);//旋转坐标轴，顺时针方向的，以弧度为单位的值。ctx.scale(2,2);//缩放，单位默认为1像素，xy缩放比例为像素大小更改ctx.fillStyle="blue";ctx.fillRect(0,0,100,100);ctx.restore();ctx.save();ctx.translate(0,0);ctx.fillRect(0,0,50,50)ctx.restore();}draw();合成
varctx;functiondraw(){varcanvas=document.getElementById('tutorial1');if(!canvas.getContext)return;varctx=canvas.getContext("2d");ctx.fillStyle="blue";ctx.fillRect(0,0,200,200);ctx.globalCompositeOperation="source-over";//全局合成操作/* 默认为覆盖 source-in：交叉 `````` */ctx.fillStyle="red";ctx.fillRect(100,100,200,200);}draw();裁剪路径
varctx;functiondraw(){varcanvas=document.getElementById('tutorial1');if(!canvas.getContext)return;varctx=canvas.getContext("2d");ctx.beginPath();ctx.arc(20,20,100,0,Math.PI*2);ctx.clip();//将之前的路径作为遮罩，只显示裁剪路径内的图像ctx.fillStyle="pink";ctx.fillRect(20,20,100,100);}draw();
