HTML笔记四，HTML5的绘图支持
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML笔记四，HTML5的绘图支持相关的知识，希望对你有一定的参考价值。
使用canvas元素，相当于一张空的画布
height:设置画布组件高度
width:设置画布组件宽度
在canvas上绘图三个步骤：
①获取<canvas />元素对应的DOM对象，这是一个Canvas对象
②调用Canvas对象的getContext(‘2d’)方法，注意d是小写，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘图
③调用CanvasRenderingContext2D对象的方法绘图
CanvasRenderingContext2D提供的方法：
arc:向Canvas的当前路径上添加一段弧
arcTo:同上
beginPath:开始定义路径
closePath:关闭定义路径
bezierCurveTo添加一段贝济埃曲线
clearRect:擦出指定矩形区域上绘制的图形
clip:从画布上裁剪出一块
createLinearGradient:创建一个线性渐变
createPattern:创建一个圆形平铺
createRadialGradient:创建一个圆形渐变
drawImage:绘制位图
drawImage(图片，目标X，目标Y)；
drawImage(图片，目标X，目标Y，目标宽，目标高)；
fill:填充当前路径
fillRect:填充一个矩形区域
fillText:填充字符串
lineTo:从当前结束点连接到指定点
moveTo:从当前结束点移动到指定点
quadraticCurveTo:添加一段二次曲线
rect:添加一个矩形
stroke:绘制边框
strokeRect:绘制一个矩形边框
strokeText:绘制字符串的边框
save:保存当前的绘图状态
restore:恢复之前保存的绘图状态
retate:旋转坐标系统
scale:缩放坐标系统
translate:平移坐标系统
CanvasRenderingContext2D提供的属性：
fillStyle:设置 填充 路径时所使用的填充风格
strokeStyle:设置 绘制 路径时所使用的填充风格
font:设置绘制字符串所使用的字体
globalAlpha:设置全局透明度
globalCompositeOperation:设置全局的叠加效果
lineCap:设置线段端点的绘制形状
lineJoin:设置线条连接点的风格(meter:直角连接，round:圆角连接，bevel:斜边连接)
miterLimit:当把lineJoin属性设为meter风格时，该属性控制锐角箭头的长度
lineWidth:设置笔触线条的宽度
shadowBlur:设置阴影的模糊度
shadowColor:设置阴影的颜色
shadowOffsetX:设置阴影在X方向上的偏移
shadowOffsetY:设置阴影在Y方向上的偏移
textAlign:设置字符串的水平对齐方式
textBaseAlign:设置字符串的垂直对齐方式
以上是关于HTML笔记四，HTML5的绘图支持的主要内容，如果未能解决你的问题，请参考以下文章