基础canvas元素用于图形的绘制通过脚本 (通常是JavaScript)来完成.创建一个固定大小的画布会公开一个或多个渲染上下文(画笔)使用渲染上下文来绘制和处理要展示的内容。canvasidmyCanvaswidth200height100styleborder:1px solid #000000;你的浏览器不支持 canvas请升级你的浏览器。/canvas!-- 需要指定一个id以便脚本中访问使用 默认 width为300、height 为 150单位都是 px 当浏览器不支持该标签时会显示替代内容 --!-- 检测支持性 --canvasidtutorialwidth300height300/canvasscripttypetext/javascriptfunctiondraw(){varcanvasdocument.getElementById(tutorial);if(!canvas.getContext)return;varctxcanvas.getContext(2d);//开始代码}draw();/scriptvarcdocument.getElementById(myCanvas);// 获取对应元素varctxc.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(){varcanvasdocument.getElementById(tutorial);if(!canvas.getContext)return;varctxcanvas.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(){varcanvasdocument.getElementById(tutorial);if(!canvas.getContext)return;varctxcanvas.getContext(2d);ctx.fillRect(0,0,150,150);// 使用默认设置绘制一个矩形ctx.save();// 保存默认状态1ctx.fillStylered// 在原有配置基础上对颜色做改变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(){varcanvasdocument.getElementById(tutorial1);if(!canvas.getContext)return;varctxcanvas.getContext(2d);ctx.fillStylered;ctx.save();ctx.translate(100,100);//移动原点ctx.rotate(Math.PI/180*45);//旋转坐标轴顺时针方向的以弧度为单位的值。ctx.scale(2,2);//缩放单位默认为1像素xy缩放比例为像素大小更改ctx.fillStyleblue;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(){varcanvasdocument.getElementById(tutorial1);if(!canvas.getContext)return;varctxcanvas.getContext(2d);ctx.fillStyleblue;ctx.fillRect(0,0,200,200);ctx.globalCompositeOperationsource-over;//全局合成操作/* 默认为覆盖 source-in交叉 */ctx.fillStylered;ctx.fillRect(100,100,200,200);}draw();裁剪路径varctx;functiondraw(){varcanvasdocument.getElementById(tutorial1);if(!canvas.getContext)return;varctxcanvas.getContext(2d);ctx.beginPath();ctx.arc(20,20,100,0,Math.PI*2);ctx.clip();//将之前的路径作为遮罩只显示裁剪路径内的图像ctx.fillStylepink;ctx.fillRect(20,20,100,100);}draw();