canvas

2017-07-25  本文已影响27人  Gaochengxin

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
阴影颜色

上一篇下一篇

猜你喜欢

热点阅读