参考文件: developer.mozilla.org/zh-CN/docs/…
canvas的兼容性
<!--不支持canvas的元素将会显示替换内容 而支持canvas的元素将会渲染canvas忽略替换元素-->
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
canvas的基本结构
<canvas id="basic" width="150" height="150"></canvas>
<canvas id="basic2"></canvas>
canvas只有width和height两个属性,当没有设定高宽的时候,初始宽高分别是300px*150px. 注意:如果css给定了高宽,跟canvas设定高宽不一样时,图形会发生扭曲
canvas绘制矩形
var canvasTriangle = document.getElementById('rectangle');
var ctxTriangle = canvasTriangle.getContext('2d');
//以下没有填充颜色 用的是预设颜色黑色
//绘制一个填充的矩形 x,y,width,height
ctxTriangle.fillRect(50,50,50,50);
// 绘制一个矩形的边框
ctxTriangle.strokeRect(0,0,50,50)
// 清除一个矩形部分
ctxTriangle.clearRect(25,25,50,50)
canvas绘制三角形
var canvasCustomize = document.getElementById('customize');
var ctxCustomize = canvasCustomize.getContext('2d');
//新建一条路径
ctxCustomize.beginPath();
//设置起始位置
ctxCustomize.moveTo(25,50);
//连接线条
ctxCustomize.lineTo(50,0);
//连接线条
ctxCustomize.lineTo(0,0);
//通过填充路径的内容区域生成实心的图形。 没有闭合的图形会自动闭合
ctxCustomize.fill();
ctxCustomize.beginPath();
//设置起始位置
ctxCustomize.moveTo(75,50);
//连接线条
ctxCustomize.lineTo(100,0);
//连接线条
ctxCustomize.lineTo(50,0);
//通过线条来绘制图形轮廓。 不会自动闭合
ctxCustomize.stroke();
ctxCustomize.beginPath();
//设置起始位置
ctxCustomize.moveTo(125,50);
//连接线条
ctxCustomize.lineTo(150,0);
//连接线条
ctxCustomize.lineTo(100,0);
//让没有闭合的图案闭合
ctxCustomize.closePath();
//通过线条来绘制图形轮廓。 不会自动闭合
ctxCustomize.stroke();
canvas绘制圆形和圆弧
var canvasCircle = document.getElementById('circle');
var ctxCircle = canvasCircle.getContext('2d');
//x y 半径 起始角度 结束角度 true-逆时针 false-顺时针
ctxCircle.arc(75,75,50,0,Math.PI*2,false);
//如果不移动 会从当前终点到下一个起点拉一条线过去
ctxCircle.moveTo(110,75);
ctxCircle.arc(75,75,35,0,Math.PI,false);
ctxCircle.moveTo(55,65)
ctxCircle.arc(50,65,5,0,Math.PI*2,false);
ctxCircle.moveTo(105,65)
ctxCircle.arc(100,65,5,0,Math.PI*2,true);
ctxCircle.stroke();
canvas绘制圆弧
var canvasArc = document.getElementById('arc');
var ctxArc = canvasArc.getContext('2d');
for(var i = 0;i<4;i++){
for (var j = 0;j<3;j++){
ctxArc.beginPath();
var x = 25+j*50;
var y = 25+i*50;
var radius = 20;
var startAngle = 0;
var endAngle = (Math.PI*j)/2+Math.PI;
var flag = i%2 == 0?false:true;
ctxArc.arc(x,y,radius,startAngle,endAngle,flag);
if(i>1){
ctxArc.stroke()
}
else{
ctxArc.fill();
}
}
}
canvas绘制贝塞尔曲线
var canvasBessel = document.getElementById('bessel');
var ctxBessel = canvasBessel.getContext('2d');
ctxBessel.beginPath();
ctxBessel.moveTo(20,25);
ctxBessel.quadraticCurveTo(100,75,20,125);
ctxBessel.quadraticCurveTo(55,75,20,25);
ctxBessel.stroke();
ctxBessel.beginPath();
ctxBessel.moveTo(150,90);
ctxBessel.bezierCurveTo(180,50,230,80,150,150);
ctxBessel.bezierCurveTo(70,80,120,50,150,90);
ctxBessel.stroke();
canvas的path2D
我们可以先将图形存储为path2D,当要用的时候再用fill和stroke方法画出来
var canvasPath = document.getElementById('path');
var ctxPath = canvasPath.getContext('2d');
var rectangle = new Path2D();
rectangle.rect(10,10,50,50);
ctxPath.stroke(rectangle);
var circle = new Path2D();
circle.arc(100,100,50,0,Math.PI*2);
ctxPath.fill(circle);
canvas填充背景颜色fillStyle
可以使用透明度rgba
var ctx = document.getElementById('color').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
canvas填充边框颜色
可以使用透明度rgba
var ctx = document.getElementById('borderColor').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ',0)';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
canvas透明度globalAlpha
背景不设置透明度,圆圈设置透明度
var ctx = document.getElementById('globalAlpha').getContext('2d');
// 画背景
// globalAlpha后面的绘制才会应用透明度
// ctx.globalAlpha = 0.2;
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = '#FFF';
// 设置透明度值
ctx.globalAlpha = 0.2;
// 画半透明圆
for (var i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
canvas rgba颜色填充
var ctx = document.getElementById('rgba').getContext('2d');
// 画背景
ctx.fillStyle = 'rgb(255,221,0)';
ctx.fillRect(0,0,150,37.5);
ctx.fillStyle = 'rgb(102,204,0)';
ctx.fillRect(0,37.5,150,37.5);
ctx.fillStyle = 'rgb(0,153,255)';
ctx.fillRect(0,75,150,37.5);
ctx.fillStyle = 'rgb(255,51,0)';
ctx.fillRect(0,112.5,150,37.5);
// 画半透明矩形
for (var i=0;i<10;i++){
ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
for (var j=0;j<4;j++){
ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
}
}
canvas的lineWidth和lineGap
var ctx = document.getElementById('line').getContext('2d');
for (var i = 0; i < 10; i++){
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(5+i*14,5);
ctx.lineTo(5+i*14,140);
ctx.stroke();
}
//决定线条顶端的样式 默认是butt
var lineCap = ['butt','round','square'];
// 创建路径
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(150,10);
ctx.lineTo(300,10);
ctx.moveTo(150,140);
ctx.lineTo(300,140);
ctx.stroke();
// 画线条
ctx.strokeStyle = 'black';
for (var i=0;i<lineCap.length;i++){
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(175+i*50,10);
ctx.lineTo(175+i*50,140);
ctx.stroke();
}
// 画线条
ctx.strokeStyle = 'black';
for (var i=0;i<lineCap.length;i++){
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(175+i*50,10);
ctx.lineTo(175+i*50,140);
ctx.stroke();
}
// lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel 和 miter。默认是 miter
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 10;
for (var i = 0; i < lineJoin.length; i++) {
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(320, 5 + i * 40);
ctx.lineTo(360, 45 + i * 40);
ctx.lineTo(400, 5 + i * 40);
ctx.lineTo(440, 45 + i * 40);
ctx.lineTo(480, 5 + i * 40);
ctx.stroke();
}
未完待续
