Canvas画布简单使用

HTML5的canvas元素可以使用js在网页上绘制图像.canvas本身是没有绘图能力的必须使用在js的内部才能完成.

• 要使用Canvas画布首先应该使用DOM获取到canvas元素
• 获取canvas元素的上下问context,传一个参数'2d',目前只支持2d
• 渲染图像的方法:stroke()可以渲染线条,fill()可以渲染一个区域填充.

绘制线条

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,80);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 6;
ctx.lineJoin='round';//线条连接处的样式
ctx.stroke();

绘制弧线

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20);
ctx.arcTo(70, 20, 100, 100, 70); // 前四个参数分别表示起始点和结束点的坐标,最后一个参数是半径
ctx.strokeStyle = 'blue';
ctx.lineWidth = 6;
ctx.stroke();

绘制圆形

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
var centerX = canvas.width/2;
var centerY = canvas.height/2;
var radius = 45;
ctx.arc(centerX,centerY,radius,0,Math.PI*2/3,true);// 第四个参数是开始角度,第五个为结束角度,最后一个是线条走向true为逆时针
ctx.stroke();

绘制矩形

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(20,20,200,200);
ctx.fillStyle = 'red';
ctx.strokeStyle = 'yellow';
ctx.lineWidth = 5;
ctx.stroke();
ctx.fill();

二次贝瑟尔曲线

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(200,canvas.height/2);
ctx.quadraticCurveTo(200,80,500,200);
ctx.stroke();

三次贝瑟尔曲线

ctx.beginPath();
ctx.moveTo(500,130);
ctx.bezierCurveTo(400,10,588,10,688,170);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke();

线性渐变

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var clg = ctx.createLinearGradient(0,400,400,400);// 前两个是渐变开始的点,后两个为渐变结束的点
clg.addColorStop(0,'red');
clg.addColorStop(0.5,'blue');
clg.addColorStop(1,'green');
ctx.fillStyle = clg;
ctx.fillRect(20,20,400,400);

径向渐变

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var crg = ctx.createRadialGradient(325,100,20,325,100,80); // 前三个是渐变开始的点及半径,后两个为渐变结束的点及半径
crg.addColorStop(0,'red');
crg.addColorStop(0.5,'blue');
crg.addColorStop(1,'green');
ctx.fillStyle = crg;
ctx.fillRect(230,10,200,200);

设置阴影

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(20,20,200,200);
ctx.fillStyle = 'red';
ctx.strokeStyle = 'yellow';
ctx.lineWidth = 10;
ctx.shadowColor = 'peru';
ctx.shadowBlur = 25;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.stroke();
ctx.fill();

绘制图像

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'QQ20171107-142421.png';
img.onload = function(){
        ctx.drawImage(img,20,20,100,200,20,20,50,40);// 后面四个值代表裁剪图片
}

绘制文字

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var x = canvas.width/2;
var y = canvas.height/2;
ctx.font = 'italic 40px Arial';
ctx.strokeStyle='yellow'; // 可以使用fillStyle设置填充颜色
ctx.lineWidth = 2;
ctx.strokeText('Hello World!',x,y);  // 可以使用fillText绘制实心字

测量文字宽高