资源描述：
《h5的canvas绘图技术》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、H5的canvas绘图技术canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。1.1浏览器不兼容问题•ie9以上才支持canvas,其他chrome、firefox、苹果浏览器等都支持•只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外)•移动端的兼容情况非常理想，基本上随便使用•2d的支持的都非常好，3d(webgl)iell才支持,其他都支持•如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。/
2、/例如：浏览器不兼容，也可以使用flash等手段进行优雅降级1.2创建画布在页面中创建canvas元素与创建其他元素一样，只需要添加一个
3、下canvas的坐标系。canvas坐标系是以左上角0,0处为坐标原点，水平方向为x轴，向右为正；垂直方向为y轴，向下为正。如下图所示：Canvas的坐标系统说明图1.4绘制线径1.获取上下文对象(CanvasRenderingContext2D)首先，获取canvas元素，然后调用元素的getContext(“2d”)方法，该方法返回一个CanvasRenderingContext2D对象，使用该对象就可以在画布上绘图了。varmcanvas二document.getElementById(z/mcanvasz/);varmcontext二mcanvas.getContext(，，2
4、d，z);2•设置绘制起点(moveTo)//语法：ctx・moveTo(x,y);*解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置。★参数：x,y都是相对于canvas坐标系的原点(左上角)。★注意：绘制线段前必须先设置起点，不然绘制无效。如果不进行设置，就会使用lineTo的处标当作moveTo3•绘制直线(lineTo)//语法：ctx.1ineTo(x,y);*解释：从上一步设置的绘制起点绘制一条直线到(x,y)点。*参数：x,y目标点坐标。4.路径的开始和闭合〃开始路径：ctx.beginPath();〃闭合路径：ctx.closePathO;★解释：如果绘制路径比
5、较复杂，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。*beginPath:核心的作用是将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径，跟之前的绘制的墨迹可以进行分开样式设置和管理。5.绘制图形(stroke)//语法：ctx・stroke();★解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke在绘制之前，还可以对画笔的颜色和粗细进行设置进行设置，方法如下://语法：ctx.strokeStyle二“#ff0000”；ctx.1incWidth=4;//值为不带单位的数字，并且大于06.填充图形(fill)//语法：ctx.f
6、ill();*解释：对己经画好的图形进行填充颜色。在填充之前，同样可以对所填充的颜色进行设置，方法如下://语法：ctx.filestyle二“#0000ff”；7.canvas绘制的基本步骤：第一步：获得上下文=>canvasElem.getContext('2d');第二步：开始路径规划=>ctx.beginPath()第三步：移动起始点=>ctx.moveTo(x,y)第四步：绘制线(线条、矩形、闘形、图片...)=>ctx.lineTo(x,y)第五步：闭合路径=ACtx.closePath();第六步：绘制描边=>ctx.stroke();案例：通过上面所学的方法绘制一个三角
7、形。你的浏览器不支持canvas,请升级浏览器
