<canvas>标签

#canvas
canvas标签只是一个容器，类似定义一块画布。

<canvas id="drawingBoard" width="" height=""></canvas>

在canvas里面可以使用js画画。
1、获取画布。

var drawingBoard=document.getElementById("drawingBoard");

2、获取画笔。getContext(“2d”)是html5的内建的对象，拥有绘制多种路径、矩形、圆形、字符、添加图像的方法。

var brush=drawingBoard.getContext("2d");

3、画一个填充红色的矩形。

brush.fillStyle("#f00");
brush.fillRect(0,0,150,75);

4、画线。

var drawingBoard=document.getElementById("drawingBoard");
var brush=drawingBoard.getContext("2d");
brush.beginPath();
brush.moveTo(0,0);
brush.lineTo(120,120);
brush.strokeStyle="green";
brush.stroke();

5、画圆。

var drawingBoard=document.getElementById("drawingBoard");
var brush=drawingBoard.getContext("2d");
brush.beginPath();
brush.arc(x,y,radius,开始角,结束角);//0,2*Math.PI    Math.PI表示180°

6、实心字体。

var drawingBoard=document.getElementById("drawingBoard");
var brush=drawingBoard.getCcontext("2d");
brush.font="30px Arial";
brush.fillText("HelloWorld",50,20);//字体左下角在原点，如果设置0,0,则看不见改字。

7、空心字体

var drawingBoard=document.getElementById("drawingBoard");
var brush=drawingBoard.getCcontext("2d");
brush.font="30px Arial";
brush.strokeText("HelloWorld",50,20);

8、线性渐变。

var drawingBoard=document.getElementById("drawingBoard");
var brush=drawingBoard.getContext("2d");
//创建渐变
var gradient=brush.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"red");
gradient.addColorStop(1,"white");
//填充渐变
brush.fillStyle=gradient;
brush.fillRect(0,0,200,100);

9、径向/圆渐变。

var drawingBoard=document.getElementById("drawingBoard");
var brush=drawingBoard.getContext("2d");
var gradient=brush.createRadialGradient(x,y,r,x1,y1,r1);
gradient.addColorStop(0,"red");
gradient.addColoeStop(1,"white");
brush.fillStyle=gradient;
brush.fillRect(0,0,200,100);

10、放置图片。

var drawingBoard=document.getElementById("drawingBoard");
var brush=drawingBoard.getContext("2d");
var img=document.getElementById("image");
brush.drawImage(img,10,10);