H5画布 canvas

moveTo(x, y) 移动
lineTo(x, y)划线
fillStyle = "color" 更改填充颜色
fill()填充
strokeStyle = "color" 更改描边样式
stroke()描边

矩形

fillRect(x, y, w, h)填充矩形(没有路径)
strokeRect(x, y, w, h) 描边矩形(没有路径)
rect(x, y, w, h)举行路径
clearRect(x, y, w, h)清空区域

arc(cx, cy, r, startDegree, endDegree, anticlockwise) 圆心x,圆心y,半径,起始角度(弧度制),结束角度(弧度制),是否逆时针
fill() 填充

文本

font = "字号 字体"
textAlign = "left/center/right"竖轴对齐方式
textBaseline ="top/middle/bottom" 横轴对齐方式
fillText('文字', x, y) 填充文字
strokeText('文字', x, y)描边文字
measureText('文字') 返回文字长度(width)
beginPath()开始路径
closePath() 闭合路径
线条样式
lineCap = "round/butt(默认)/square" 更改线帽
lineJoin = "round/miter(默认)/bevel(切角)" 更改连接点样式
lineWidth = 20 线宽

阴影

shadowColor 设置或返回阴影颜色
shadowBlur 设置或返回阴影模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY设置或返回阴影距形状的垂直距离

渐变

createLinearGradient(x0, y0, x1, y1)创建线性渐变 起始位置 结束位置(用在画布内容上)
createPattern(img, "repeat|repeat-x|repeat-y|no-repeat")在指定的方向上重复指定的元素
createRadialGradient(x0, y0, r0, x1, y1, r1)创建径向渐变 起始位置 结束位置(用在画布内容上)
addColorStop(位置, 颜色) 规定渐变对象中的颜色和停止位置(0~1)

画图

drawImage(img, x, y)在画布上绘制图像、画布或视频
drawImage(img, x, y, width, height)
drawImage(img, sx, sy, swidth, sheight, x, y, width, height) 剪切图像,并在画布上定位被剪切的部分 。

你可能感兴趣的:(H5画布 canvas)