canvas
canvas 画布标签
strokeRect() 绘制空心矩形
fillRect() 绘制实心矩形
clearRect() 清空绘制的矩形
fillStyle 设置填充颜色
strokeStyle() 设置边框颜色
strokeWidth() 设置边框像素
moveTo() 起点线
lineTo() 结束点
beginPath(): 开始一条路径
closePath():创建从当前点到开始点的路径。
arc() 用于创建有弧度的图形,如:圆,扇形。
语法: 对象.arc(x,y,r,起始角,结束角,ture/false)
canvas 插入图片
语法 1:在画布上定位图像:context.drawImage(img,x,y);
语法 2:在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
语法 3:剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
设置背景
createPattern(img,平铺方式)平铺图片
canvas渐变
线性渐变:
createLinearGradient(x1,y1,x2,y2)
放射性渐变:
createRadialGradient(x1,y1,r1,x2,y2,r2)
canvas 文本
1.strokeText(文字,x,y)
文字边框
2.fillText(文字,x,y)
文字填充
3.font
文字大小:'40px 宋体'
4.textAlign (左右对齐方式)
默认是start,跟left一样的效果 end right center
5.textBaseLine (上下对齐方式)
上top 中 middle 下 bottom
阴影:
shadowOffsetX、shadowOffsetY X轴偏移、Y轴偏移
shadowBlur 高斯模糊值
shadowColor
阴影颜色