cover 前段时间有个设计的小伙伴给我推荐了好多日本的网站,个个炫酷到飞起,身为重度前端职业病患者当然会审查元素看一下都是怎么实现的了,看完总结出:日本的网速领先国内好几倍(很多背景是插的mp4......),当然也有一部分是canvas做的,比如这个时钟效果。之前就对canvas感兴趣并了解过一点,看过这些网站更坚定了去认真学一下的决心,同时也记了些笔记。

定义canvas绘制环境

var canvas = document.getElementById('canvas')  
if (canvas.getContext('2d')) {  
    var context = canvas.getContext('2d')
}else{
    alert('不支持canvas')
}

线条API

context.moveTo(x,y);//绘制起始点  
context.lineTo(x,y);  
context.lineWidth = num;//线条粗细  
context.strokeStyle = 'color';//线条颜色  
context.fillStyle = 'color';//填充颜色  
context.stroke();//绘制  
context.fill();//填充闭合区域  
//先stroke再fill会导致边框的一半被填充为背景色
context.beginPath();context.closePath();//闭合工作区  
context.beginPath();context.closePath();//区域中的线条会自动闭合。  
线条属性
lineCap

context.lineCap='',线段的端点样式(线段的帽子)
三个可选属性:butt(默认),round(圆角),square(方角); tound和square会比默认长出一点。

lineJoin

context.lineJoin='',线与线相交处样式
三个可选属性:bevel(斜接),round(圆角),miter(默认,尖角);

meterLimit

context.meterLimit=number,
context.lineJoin='miter'时,实际角与外边角的距离;

弧线API

context.arc(conterX,  
conterY,//圆心位置;  
radius,//半径;  
staringAngle,//起始弧度;  
endingAngle,//终止弧度;  
anticlockwise = false//是否逆时针;)  

矩形API

context.rect(x,y,width,height);//规划路径  
context.fillRect(x,y,width,height);//直接绘制(填充)  
context.strokeRect(x,y,width,height);//直接绘制  

图形变换

位移: 用过 translate(x,y) 后接下来再使用translate时会在上次(x,y)的基础上进行位移,所以要在使用后紧跟一句translate(-x,-y)来解决。api解决办法是将每次位移变换放在 save 和 restore 函数中间

context.save();  
context.fillStyle = "red";  
context.translate(100,100);  
context.fillRect(0,0,200,200);  
context.fill();  
context.restore();  
context.save();  
context.fillStyle = "blue";  
context.translate(200,100);  
context.fillRect(0,0,200,200);  
context.fill();  
context.restore();  

旋转:rotate(deg), 缩放:scale(sx, xy)

图形变换矩阵

transform(a, b, c, d ,e, ,f)

a:水平缩放 b:水平倾斜 c:垂直倾斜 d:垂直缩放 e:水平位移 f:垂直位移

例如:

cxt.transform(2,0.3,0.3,3,100,100);  

多个transform可以叠加效果,但用的太多叠加会导致一些问题,可以用setTransform(a,b,c,d,e,f) 重置原来所有transform,从初始状态开始变换。

线性渐变

主要用到两个函数

var grd = context.createLinearGradient(startX,startY,endX,endY) //创建线性渐变  
grd.addColorStop(stop,color) //设置渐变关键点  
var grd = context.createLinearGradient(0,0,555,555);  
grd.addColorStop(0.0,'#fff');  
grd.addColorStop(1.0,'#111');  
context.fillStyle = grd;  
context.fillRect(0,0,666,666);  

径向渐变

和线性渐变相似

var crg = context.createRadialGradient(400, 400, 0, 400, 400, 300);//参数为起止圆x1,y1,r1,x2,y2,r2  
crg.addColorStop(0.0,"#fff");  
crg.addColorStop(1.0,"#222");  
context.fillStyle = crg;  
context.fillRect(0,0,766,766);  

背景填充

主要用 createPattern(填充 ,repeat-style); 填充可选 img,canvas,video,均为对象形式。 repeat-style可选 no-repeat,repeat-x,repeat-y,repeat。

var bgimg = new Image();  
bgimg.src = 'image.jpg';  
bgimg.onload = function(){  
var pattern = context.createPattern(bgimg, 'repeat');  
context.fillStyle = pattern;  
context.fillRect(0,0,800,800);}  

绘制曲线

1.可用arc()函数。

2.用arcTo(x1,y1,x2,y2,r),参数为两切点坐标和曲线半径。

context.moveTo(200,200);  
context.arcTo(300,200,400,400,100);  
context.strokeStyle = "#cdccdd";  
context.stroke();  

3.贝塞尔二次曲线:

context.moveTo(x,y);  
context.quadraticCurveTo(x1,y1,x2,y2);  
//x,y,x2,y2为起始点和终止点坐标,x1,y1为控制点坐标

4.贝塞尔三次曲线:

context.moveTo(x,y);  
context.bezierCurveTo(x1,y1,x2,y2,x3,y3);  
//x,y,x3,y3为起始点和终止点坐标,x1,y1,x2,y2为控制点坐标

文字渲染

context.fillText(string ,x,y);//x,y为起始点坐标  
context.strokeText(string ,x,y)//x,y为起始点坐标  
var string = "目标文字";  
context.beginPath();  
context.font = 'bold 55px Arial';  
context.fillStyle = '#ffff00';  
context.strokeStyle = '#0000ff';  
context.fillText(string , 200,200);//实心文字  
context.strokeText(string ,200,400);//只有字体描边  
context.closePath();  

fillText和strokeText都有第四个可选参数(string ,x,y,maxlen)最大宽度,单位为px,如果有第四个参数文字会被绘制在限定宽度内。context.fillText(string,200,200,400);

font:

最多传入五个参数,context.font = 'font-style,font-variant,font-weight,font-size,font-family'。 font-style: normal(default),italic(斜体字),oblique(倾斜字体)后两者效果基本一样。
font-varant: normal(default),small-caps(只用于英文,小型的大写字母).
font-weigth: lighter(和normal效果一样),normal(default),bold(加粗),bolder(和bold效果一样)。
font-size: 可用px,em,30%这些css方法设置,也有文字属性值,不推荐使用。
font-family: 类似css设置多种字体备选,支持@font-face。

扫描二维码,分享此文章

scc