《canvas标签介绍》PPT课件

《《canvas标签介绍》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、重要的Canvas标签主讲：丛浩@LAMP兄弟连丛浩conghao@lampbrother.netCanvas的使用您的浏览器不支持canvas标签canvas标签在页面中只显示一个设定背景色的画布，如果要产生新内容或者进行画图操作，需要借助canvasAPI(HTML5的内置对context对象)和javascript操作实现画图或者其他图像操作canva

2、s的常见属性属性值描述heightpixels设置canvas的高度。widthpixels设置canvas的宽度。Canvas的APIcanvas主要属性和方法方法描述save()保存当前环境的状态restore()返回之前保存过的路径状态和属性createEvent()getContext()返回一个对象，指出访问绘图功能必要的APItoDataURL()返回canvas图像的URLCanvas的API颜色、样式和阴影属性和方法属性描述fillStyle设置或返回用于填充绘画的颜色、渐变或模式strokeStyle设置或返回用于笔触的颜色、渐变或模式shadowColo

3、r设置或返回用于阴影的颜色shadowBlur设置或返回用于阴影的模糊级别shadowOffsetX设置或返回阴影距形状的水平距离shadowOffsetY设置或返回阴影距形状的垂直距离方法描述createLinearGradient()创建线性渐变（用在画布内容上）createPattern()在指定的方向上重复指定的元素createRadialGradient()创建放射状/环形的渐变（用在画布内容上）addColorStop()规定渐变对象中的颜色和停止位置Canvas的API线条样式属性和方法属性描述lineCap设置或返回线条的结束端点样式lineJoin设置或返

4、回两条线相交时，所创建的拐角类型lineWidth设置或返回当前的线条宽度miterLimit设置或返回最大斜接长度Canvas的API矩形方法方法描述rect()创建矩形fillRect()绘制"被填充"的矩形strokeRect()绘制矩形（无填充）clearRect()在给定的矩形内清除指定的像素Canvas的API-路径方法方法描述fill()填充当前绘图（路径）stroke()绘制已定义的路径beginPath()起始一条路径，或重置当前路径moveTo()把路径移动到画布中的指定点，不创建线条closePath()创建从当前点回到起始点的路径lineTo()添加

5、一个新点，创建从该点到最后指定点的线条clip()从原始画布剪切任意形状和尺寸的区域quadraticCurveTo()创建二次贝塞尔曲线bezierCurveTo()创建三次方贝塞尔曲线arc()创建弧/曲线（用于创建圆形或部分圆）arcTo()创建两切线之间的弧/曲线isPointInPath()如果指定的点位于当前路径中，返回布尔值Canvas的API-转换方法方法描述scale()缩放当前绘图至更大或更小rotate()旋转当前绘图translate()重新映射画布上的(0,0)位置transform()替换绘图的当前转换矩阵setTransform()将当前转换重

6、置为单位矩阵。然后运行transform()Canvas的API-文本属性和方法属性描述font设置或返回文本内容的当前字体属性textAlign设置或返回文本内容的当前对齐方式textBaseline设置或返回在绘制文本时使用的当前文本基线方法描述fillText()在画布上绘制"被填充的"文本strokeText()在画布上绘制文本（无填充）measureText()返回包含指定文本宽度的对象Canvas的API-图像绘制方法方法描述drawImage()向画布上绘制图像、画布或视频chrome不支持Canvas的API-像素操作方法和属性属性描述width返回Imag

7、eData对象的宽度height返回ImageData对象的高度data返回一个对象，其包含指定的ImageData对象的图像数据方法描述createImageData()创建新的、空白的ImageData对象getImageData()返回ImageData对象，该对象为画布上指定的矩形复制像素数据putImageData()把图像数据（从指定的ImageData对象）放回画布上Canvas的API图像合成属性属性描述globalAlpha设置或返回绘图的当前alpha或透明值globalCompositeOpe