Canvas

本学习笔记来源于，详细见链接http://www.runoob.com/html/html5-canvas.html

1.创建一个画布

<canvas id= "myCanvas" width= "200" height= "200" style= "border :1px solid #ff0000; "></canvas>

2.使用JavaScript绘制图形

1）先获取<canvas>元素

var  c = document.getElementById("myCanvas");

2）创建context对象

var ctx = c.getConext("2d");  //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

//不管绘制矩形、线条还是圆形，前面部分都是一样，只是后面有所区分

3）绘制矩形

ctx.fillStyle = "# 00ff00 ";  //设置fillStyle属性可以是CSS颜色，渐变，或图案；fillStyle 默认设置是#000000（黑色）。

ctx.fillRect = (0, 0, 150, 150); // fillRect(x,y,width,height) 方法定义了矩形当前的填充方式，表示在画布上绘制 150x150 的矩形，从左上角开始 (0,0)。

4）绘制线条

ctx.lineWidth="5";   //定义线宽
ctx.strokeStyle="green";  // Green path

ctx.moveTo(0,0); //moveTo(x,y) 定义线条开始坐标

ctx.lineTo(200,200); //lineTo(x,y) 定义线条结束坐标

ctx.stroke( ); //使用 stroke() 方法来绘制线条

5）绘制圆形

ctx.beginPath( ); //beginPath() 方法开始一条路径，或重置当前的路径。

ctx.arc(95,50,40,0,2*Math.PI); // arc(x,y,r,start,stop) x,y定义了圆心位置  Math.PI表示180°，画圆的方向是顺时针

ctx.stroke();  // Draw it

6）绘制文本

ctx.font="30px Arial";  //定义字体  高30px 的Arial字体
ctx.fillText("Hello World",10,50); //实心填充  后面数字为x,y起始坐标

tx.strokeText("Hello World",10,50); //空心填充 

7）渐变

注：当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

// 创建渐变  createLinearGradient(x,y,x1,y1) - 创建线条渐变
var grd=ctx.createLinearGradient(0,0,200,0);  
grd.addColorStop(0,"red");  //addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;  //渐变填充
ctx.fillRect(10,10,150,80);

// 创建渐变  createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);  
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

8）图像

var img=document.getElementById("scream");
ctx.drawImage(img,10,10);