HTML 5 <canvas>

一、canvas元素创建画布

1，创建画布

画布创建方法：指定id、width（画布宽度）、height（画布高度）。

例如<canvas id="canvas" width="500" height="350"></canvas>

上面的意思就是，创建一个画布，长度为500，高度为350.

<canvas id="canvas" width="500" height="350"></canvas>

2，引入绘画脚本

<script type="text/javascript" src="canvas.js"></script>

3，使用draw函数进行绘画

在body的属性里面，使用

onload="draw('canvas');"

语句。调用脚本文件中的draw函数进行图形绘画

二、canvas 绘制矩形

1，获取canvas元素

用getElementById方法获取到canvas对象。

2，取得上下文

在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象。要使用canvas对象的getContext()方法获得图形上下文。在draw函数中把参数设置为“2d”。

3，填充与绘制边框

Canvas绘制有两种方法：

1）         填充（fill）

填充是将图形内部填满。

2）         绘制边框（stroke）

绘制边框是不把图形内部填满，只是绘制图形的外框

4，设置绘制样式

当我们在绘制图形的时候，首先要设定好绘制的样式，然后我们就可以调用有关的方法进行绘制。

1）         fillStyle属性

填充的样式，在这个属性里面何止填入的填充颜色值。

2）         strokeStyle属性

图形边框的样式，在这个属性里面设置填入边框的填充颜色。

5，指定画笔宽度

通过对上下文对象（context）的lineWidth属性来设置图形边框的宽度，任何直线的宽度都是可以通过lineWidth来设置直线的宽度的。

6设置颜色值

绘制图形的时候要填充的颜色或者边框分别可以通过fillStyle属性和strokeStyle属性来指定。

颜色的值可以使用

16进制的颜色值（#000000）

颜色名（black）

Rgb（rgba（0,0,0））

Rgba（rgba（0,0,0,0.1））    0.1透明度

7绘制矩形

使用fillRect方法和strokeRect方法来填充矩形和绘制矩形的边框。

Context.fillRect(x,y,width,height)
Content.strokeRect(x,y,width,height)

这两种方法的参数都是一样的，X是指矩形的七点横坐标，y是指矩形的纵坐标，坐标的圆点是canvas画布的最左上角，width是指矩形的航渡，height是指矩形的高度。

function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "green";
    context.strokeStyle = "#fff";
    context.lineWidth = 5;
    context.fillRect(0,0,400,300);
    context.strokeRect(50,50,180,120);
    context.strokeRect(110,110,180,120);
}

三，      绘制原型

1,创建开始路径

使用图形上下文对象的beginPath方法

context.beginPath();

2,创建图形路径

创建运行路径时，需要使用原型上下文对象的arc方法。

context.arc(x,y,radius,starAngle,endAngle,anticlockwise)

x是绘制原型的七点横坐标，y是绘制原型七点的纵坐标，radius是原型的半径，starAngle是开始的角度，endAngle是结束的角度，anticlockwise是否按顺时针方向绘制。

绘制半径和圆弧时指定参数为开始弧度与结束弧度，如果你喜欢使用角度，可以使用以下这个方法，把角度换成弧度。

var radius = degrees*Math.PI/180

这个里面的Math.PI表示的角度是180度，Math.PI*2的角度是360度。

3，创建完成关闭路径

使用图形上下文对象的closePath方法将路径关闭。

context.closepath();

4,设置绘制样式然后调用绘制方法进行绘制

content.fillStyle = ‘rgba(255,0,0,0.25)’;
content.fill();
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "#f1f2f3";
    context.fillRect(0,0,400,400);
    for(var i=0;i<10;i++){
 
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
 
        context.fillStyle = "rgba(255,0,0,0.25)";
        context.fill();
 
    }
}

四、绘制文字

1，设置文字字体

绘制字体时可以使用fillText方法或者strokeText方法。

1)fillText方法用填充的方式来绘制字符串

content.fillText(text,x,y,[maxwidth]);

strokeText方法用轮廓的方式来绘制字符串；

2)context方法用轮廓的方式来绘制字符串；

context.strokeText(text,x,y,[maxwidth]);

第一个参数表示要绘制的文字，第二个参数x表示要绘制的文字的七点横坐标，第三个参数Y表示要绘制的文字的七点纵坐标，第四个参数maxwidth为可选参数，表示显示文字的时候最大的宽度，可以方式文字溢出。

2，设置文字垂直对齐方式

context.textBaseline=’alphabetic’

属性值可以是top（顶部对齐），hanging（悬挂），middle（中间对齐），bottom（底部对齐），alphabetic是默认值

3，设置文字水平对齐方式

function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = 'green';
    context.fillRect(0,0,800,300);
    context.fillStyle = '#fff';
    context.strokeStyle = '#fff';
    context.font = "bold 40px '字体','字体','微软雅黑','宋体'";
    context.textBaseline = 'hanging';
//    context.textAlign = 'start';
    context.fillText('欢迎收看麦子学院推出的' ,10 ,40);
    context.fillText('《HTML5+CSS3轻松入门与实战》',40,110);
    context.fillText('视频教程',580,180);
//    context.fillText('123456789111121314151617181920212223242526272829《HTML5+CSS3轻松入门与实战》《HTML5+CSS3轻松入门与实战》《HTML5+CSS3轻松入门与实战》',0,230,800);
//    context.strokeText('麦子学院',0,40);
}

五、保存文件

很多时候绘制完成的图片需要保存，那么我们就可以使用到Canvas API 来完成这最后一步！

Canvas API 使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载，然后我们就可以把重新装载后的文件直接保存。

Canvas API 保存文件的原理实际上就是把我们绘画的状态动态输出到一个data URL 地址所指向的数据中的过程。

什么是data URL ?

Data URL 实际上就是base64位编码的URL,主要用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入数据，比如img元素里面的图像文件。

Data URL 的格式 “data:image/jpeg:base64,/9j.4…”

toDataURL的使用方法

canvas.toDataURL(type);

这个方法使用一个参数type，表述输出数据的MIME类型

什么是MIME类型：

Jpg  image/jpeg

function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "green";
    context.fillRect(0,0,400,300);
    window.location = canvas.toDataURL('image/png');
}

六、绘制动画

实际上就是不断变化坐标、擦除、重绘的过程

1、         使用setInterval方法设置动画的见个时间

setInterval（code，milisec）

setInterval方法html中固有方法，这个方法接收两个参数，第一个函数表示执行动画的函数，第二个参数为见个时间，单位是（毫秒）。

2、         用来绘图的函数

1）         通过不断的变换X和Y的坐标来实现动画效果。

2）         在该函数中先用clearRect方法将画布整体或者是局部擦除。

擦书图像clearRect方法：

Context.fillRect(x,y,width,height);

X是指我们七点的横坐标，y是指我们七点的纵坐标，width是指擦子的长度，height是指擦子的高度。

var context;
var width,height;
var i;
function draw(id){
    var canvas = document.getElementById(id);
    context = canvas.getContext('2d');
    width = canvas.width;
    height = canvas.height;
    setInterval(painting,100);
    i = 0;
}
function painting(){
//    context.fillStyle = "green";
//    context.fillRect(i,i,10,10);
//    context.fillRect(400-i,400-i,10,10);
//    context.fillRect(400-i,400-i,10,10);
//    context.fillRect(0,400-i,10,10);
    context.fillStyle = "green";
    context.fillRect(0,0,width,height);
    context.clearRect(10,10,width,height);
    context.fillStyle = "green";
    context.fillRect(i,20,10,10);
    i=i+20;
}