html5 2d绘图,HTML5 canvas绘图

简介

HTML5新增了canvas元素，我们可以利用canvas绘制各种图形文本图表等，熟悉使用canvas还可以写出各种多彩的特效。

只是声明一张画布，本身并没有绘图能力，我们需要利用JS来实现绘图。

Document

您的浏览器不支持canvas

使用JS来绘制图形

从上面的步骤我们创建了一个画布，现在我们开始利用JS获取到元素，然后绘制一个简单的图形。

您的浏览器不支持canvas

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.fillStyle="#FF0000";//填充色

ctx.fillRect(0,0,200,200);//填充

ctx.strokeStyle="#0000FF";//画笔色

ctx.moveTo(0,0);

ctx.lineTo(200,200);

ctx.stroke();//描线

下面绘制一个圆形

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);//绘制圆形

ctx.stroke();

上面是一个简单填充和描线的案例，我们需要熟记一些常用的方法，才能流畅绘图。

canvas绘制文本

除了图形，canvas还可以绘制文本，使用fillText(text,x,y)方法填充实心文本，stroke(text,x,y)方法绘制空心文本。

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.fillStyle="#FF0000";

ctx.font="30px Arial";

ctx.fillText("Hello",20,50);//填充文本

ctx.strokeStyle="#0000FF";

ctx.strokeText("你好",100,50);//绘制文本

canvas创建渐变

canvas可以填充各种形状，也可以创建渐变色填充。createLinearGradient(x,y,x1,y1)创建线性渐变，createRadialGradient(x,y,r,x1,y1,r1)创建径向渐变。

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

// 创建渐变

var gdt=ctx.createLinearGradient(0,0,200,0);

gdt.addColorStop(0,"#FF0000");

gdt.addColorStop(1,"#0000FF");

// 填充渐变

ctx.fillStyle=gdt;

ctx.fillRect(20,20,170,120);

径向渐变

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

// 创建渐变

var gdt=ctx.createRadialGradient(100,75,5,120,90,100);

gdt.addColorStop(0,"#FF0000");

gdt.addColorStop(1,"#0000FF");

// 填充渐变

ctx.fillStyle=gdt;

ctx.fillRect(20,20,170,100);

canvas绘制图像

除了绘制图形，canvas还能将已有的图像资源放入画布中，使用drawImage(image,x,y)方法绘制图像。

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var img = document.getElementById('img');

ctx.drawImage(img,20,20);//绘制图像资源