html5：canvas教程

《html5：canvas教程》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、canvas变换变换操作并不限于缩放和平移，我们可以使用函数context.rotate(angle)来旋转图像，甚至可以直接修改底层变换矩阵以完成一些高级操作，如剪裁图像的绘制路径。如：context.rotate(1.57)，旋转角度参数以弧度为单位。beginPath()：开始moveTo(x,y)：起点坐标lineTo(x,y)：目标坐标closePath()：连接起点，闭合路径translate()：移动rotate()：旋转restore()：恢复scale()：缩放save()：保存rotate(angle)：旋转图像q

2、uadraticCurveTo()：绘制曲线stroke()：绘制strokeText()：描绘文本轮廓strokeStyle()：颜色设置strokeRect()：使用当前的storkestyle来绘制一个矩形，而只绘制矩形的边缘。fill：填充fillRect()：绘制一个矩形，并以当前的fillStyle来填充fillStyle()：样式填充fillText：填充文本内容drawIamge()：图片填充createPattern()：使用背景图片填充addColorStop()：渐变填充createRadialGradient(

3、)：放射性渐变clearRect()：清除指定矩形区域的像素.lineCap（butt

4、square

5、round）：指定线条末端的样式.fillStyle：设置为CSS颜色、一个图案或一种颜色渐变.lineWidth：线条宽度设置.lineJoin(round)：修改当前形状中线段的连接方式，让拐角变得更圆滑.shadowColor：任何css中的颜色值，可以使用透明度(alpha).shadowOffsetX：像素值，值为正数，向右移动阴影;值为负数，向左移动阴影.shadowOffsetY：像素值，值为正数，向下移动阴影;值为负数

6、，向上移动阴影.shadowBlur：高斯模糊值，值越大，阴影越模糊HTML5资料1Canvas教程是一个新的用于通过脚本（通常是JavaScript）绘图的HTML元素。例如，他可以用于绘图、制作图片的组合或者简单的动画（当然并不那么简单）。Itcanforinstancebeusedtodrawgraphs,makephotocompositionsordosimple(andnotsosimple)animations.1.1基本用法Basicusage 元素Let'sstartthistutor

7、ialbylookingattheelementitself. 让我们从元素的定义开始吧。Thislooksalotliketheelement,theonlydifferenceisthatitdoesn'thavethesrcandaltattributes.看起来很像，唯一不同就是它不含src和alt属性。Theelementhasonlyt

8、woattributes-widthandheight.ThesearebothoptionalandcanalsobesetusingDOMpropertiesorCSSrules.它只有两个属性，width和height，两个都是可选的，并且都可以DOM或者CSS来设置。Whennowidthandheightattributesarespecified,thecanvaswillinitiallybe300pixelswideand150pixelshigh.如果不指定width和height，默认的是宽300像素，高150像素

9、。TheelementcanbesizedarbitrarilybyCSS,butduringrenderingtheimageisscaledtofititslayoutsize.  (Ifyour renderingsseemdistorted,tryspecifyingyourwidthandheightattributesexplicitlyintheattributes,andnotwithCSS.)虽然可以通过CSS来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必

10、一味依赖CSS，可以尝试显式指定canvas的width和height属性值）。Theidattributeisn'tspecifictotheelementbutisoneofdefaultHTMLat