Canvas入门

创建Canvas

<canvas id="myCanvas" >
你的浏览器不支持canvas!
</canvas>

var cav = document.getElementById('myCanvas')
if(cav.getContext){
var ctx = canvas.getContext('2d')
}

api使用

1.线

ctx.beginPath()//开始绘制
ctx.moveTo(20,20) // 设置起点
ctx.lineTo(200,20) // 设置目标点
ctx.lineWith=1.0   //设置线宽
ctx.strokeStyle='#CC0000' //设置线的颜色
ctx.stroke()   //线着色  线变得可见

2.矩形

ctx.fillRect(50,50,200,100) //画矩形 参数设置 fillRect(x,y,width,height)

ctx.strokeRect(10,10,200,100); //空心矩形  

ctx.clearRect(100,50,50,50);//清除矩形区域内容

3.绘制文本

ctx.font //设置字体

ctx.textAlign = "center" //对齐方式

ctx.fillStyle = "#008600" //填充颜色

ctx.fillText = ("text",20,20) //设置内容及坐标位置

ctx.strokeText =("text",20,50) //空心字

4.绘制圆形和扇形使用 arc 绘制扇形 ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x,y 圆心坐标 radius 半径 startAngle,endAngle 起末角度(Math.PI表示角度180°) anticlockwise 表示作图是顺时针还是逆时针

渐变色

createLinearGradient(x1,y1,x2,y2) // x1,y1是起点坐标x2 y2是终点坐标 通过坐标可以实现 从上至下   从左到右的渐变
 
 var Gradient = ctx.createLinearGradient(0,0,0,160);
 
 myGrandient.addColorStop(0,"#000000")
 
 myGradient.addColorStop(1, "#636363");

6.设置阴影

ctx.shadowOffsetX= 10; //水平位移
ctx.shadowOffsetY = 10 //设置垂直位移
ctx.shadowBlur=5 //设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)"//设置阴影颜色

ctx.fillstyle = "#cc0000"
ctx.fillRect(10,10,200,100)

Canvas 入门

Canvas入门

创建Canvas

api使用