移动端 canvas基础1

一、canvas画布

Canvas是HTML5中新出的一个元素,开发者可以通过JS脚本动态绘制图像。

#1. 创建canvas画布

在页面中创建canvas标签,并设置其id和宽高 (不要通过css设置,会有bug)

<canvas id="myCanvas" width="500" height="500">
 

#2. 设置画布

// 1. 通过js设置画布宽高
var canvas = document.getElementById(‘myCanvas‘);
canvas.width = 800;
canvas.height = 600;

// 2. 获取上下文对象 (可以理解为获取画笔)
var cxt = canvas.getContext(‘2d‘);
 

#二、绘制 - 线条

方法 描述
beginPath() 开启路径
moveTo(x,y) 起始点
lineTo(x,y) 下一个点
closePath() 闭合路径
stroke() 描边绘制
fill() 填充绘制
属性 描述
strokeStyle 描边颜色
fillStyle 填充颜色
lineWidth 粗细
lineCap 设置或返回线条端点样式
butt 默认,平直边缘
round 圆形线帽
square 正方形线帽
lineJoin 设置或返回两条相交线的拐角
miter 默认,尖角
round 圆角
bevel 斜角

#三、绘制 - 矩形

方法 描述
rect(x,y,width,height) 需配合stroke()或fill()方法绘制矩形
fillRect(x,y,width,height) 绘制填充矩形
strokeRect(x,y,width,height) 绘制矩形边框
clearRect(x,y,width,height) 清除指定矩形区域

#四、绘制 - 圆弧

==弧线==arc(x,y,r,sAngle,eAngle,counterclockwise)

参数 描述
x,y 圆心的坐标
r 圆的半径
sAngle 起始弧度
eAngle 结束弧度
弧度 = Math.PI/180*角度
counterclockwise 可选。true逆时针,false顺时针

==两切线之间的弧线== arcTo(x1,y1,x2,y2,r)

参数 描述
x1,y1 弧的起点坐标
x2,y2 弧的终点坐标
r 半径

==绘制扇形==

cxt.moveTo(x,y);
cxt.arc(x,y...);
cxt.closePath();
 

#五、绘制 - 文本

属性 描述
font 设置或返回文本的当前字体属性
textAlign 设置或返回文本的对齐方式
textBaseline 设置或返回文本的基线
方法 描述
fillText(text,x,y) 绘制填充文本
strokeText() 绘制描边文本

#六、绘制 - 图像

drawImage(img,x,y,width,height)
 
参数 描述
img 要使用的图像、视频
x 绘制的起始位置x坐标
y 绘制的起始位置y坐标
width 可选。宽度
height 可选。高度

#七、绘制 - 转换

方法 描述
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新设置画布原点
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

#八、绘制 - 渐变色

#线性渐变
var lg = ctx.createLinearGradient(x, y, x1, y1);
lg.addColorStop(渐变位置,颜色);
ctx.strokeStyle = lg;
 
#径向渐变
var rg = cxt.createRadialGradient(起始圆x, 起始圆y, 半径, 结束圆x, 结束圆y, 半径);
rg.addColorStop(渐变位置,颜色);
ctx.strokeStyle = rg;
 

#九、多图形组合方式

ctx.globalCompositeOperation = 
‘source-over‘ //后画覆盖先画
‘destination-out‘ //后画清空先画
 

#十、保存画布

cvs.toDataURL();

移动端 canvas基础1

上一篇:CentOS7下安装mysql5.6


下一篇:移动端 canvas统计图