HTML5 Canvas

<canvas>元素是HTML5中的新元素，使用这个元素可以，在网页中绘制需要的图形

<canvas></canvas>是图形的容器，需要通过脚本（通常是Javascript）来完成。

可以在canvas中绘制路径、盒、圆、字符及添加图像

一 一些简单的例子

1 canvas例子--画一个粉红色的矩形

		<!-- Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素. -->
		<canvas id="myCanvas1"  class="border" width="200px" height="200px"></canvas>

                var canvas = document.getElementById('myCanvas1');
				//创建context对象
				//getContext("2d") 对象是内建的 HTML5 对象
				//拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
				var ctx = canvas.getContext('2d');
				//设置fillStyle属性可以FF是CSS颜色，渐变，或图案
				ctx.fillStyle="pink";
				//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
				ctx.fillRect(50,50,100,120);

 给canvas加了一个边框的样式后，效果如下图。

 

---

2 canvas --画路径

			function drawLineCanvas(canvas){
				var ctx=canvas.getContext('2d');
				ctx.fillStyle="#00FF00";
				// 定义开始坐标(0,0)
				ctx.moveTo(0,0);
				// 结束坐标 (200,100).
				ctx.lineTo(200,100);
				// 然后使用 stroke() 方法来绘制线条:
				ctx.stroke();
			}

---

3 canvas-画弧线

function drawCircleCanvas(canvas){
				var ctx=canvas.getContext('2d');
				ctx.strokeStyle="pink";
				ctx.beginPath();
				//arc(x,y,r,start,stop) 用于画圆
				//按顺时针方向画的
				ctx.arc(95,50,40,Math.PI/2,2*Math.PI);
				ctx.stroke();
			}

---

4 canvas--描绘文字（实心）

function drawFontCanvas(canvas){
				var ctx = canvas.getContext('2d');
				ctx.fillStyle="red";
				// 使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：
				ctx.font="30px Arial";
				// fillText("HELLO WORLD!",50,100)  文字内容 文字在画布中起始的位置
				ctx.fillText("HELLO WORLD!",50,100);
			}

---

5 canvas--描绘文字（空心）

function drawFontCanvas2(canvas){
                var ctx = canvas.getContext('2d');
                // 使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：
                ctx.font="30px Arial";
                
                //设置渐变
                var grd = ctx.createRadialGradient(150,150,20,160,160,100);
                grd.addColorStop(0,"red");
                grd.addColorStop(0.5,"white");
                grd.addColorStop(1,"pink");
                ctx.strokeStyle=grd;
                // 设置阴影样式
                ctx.shadowColor="#080808";
                ctx.shadowBlur=10;
                ctx.shadowOffsetX="5px";
                ctx.shadowOffsetY="5px";
                ctx.strokeText("HELLO WORLD!",50,100);
            }

---

6.1 canvas--线性渐变矩形

			function drawLineGradientCanvas(canvas){
				var ctx=canvas.getContext('2d');
				// Create gradient
				var grd = ctx.createLinearGradient(0,0,200,0);
				// 颜色范围只能在0-1之间
				grd.addColorStop(0,"red");
				grd.addColorStop(0.5,"white");
				grd.addColorStop(1,"pink");
				// Fill with  gradient
				ctx.fillStyle=grd;
				ctx.fillRect(10,10,150,80);
			}

---

6.2 canvas--绘制渐变圆

			function drawRadialGradient(canvas){
				var ctx = canvas.getContext('2d');
				
				// crate gradient
				// context.createRadialGradient(x , y , r , x1 , y1 , r1) 
// 				 x：表示渐变的开始圆的 x 坐标
// 				 y：表示渐变的开始圆的 y 坐标
// 				 r：表示开始圆的半径
// 				 x1：表示渐变的结束圆的 x 坐标
// 				 y1：表示渐变的结束圆的 y 坐标
// 				 r1：表示结束圆的半径
				var grd = ctx.createRadialGradient(150,150,20,160,160,100);
				grd.addColorStop(0,"red");
				grd.addColorStop(0.5,"white");
				grd.addColorStop(1,"pink");
				// Fill with  gradient
				ctx.fillStyle=grd;
				ctx.fillRect(0,0,300,300);
			}

---

7canvas--在画布上绘制图片

function drowImageCanvas(canvas,img){
                 // img 为img DOM对象
				 var ctx = canvas.getContext('2d');
				 //  drawImage(image,x,y) 把一幅图像放置到画布上
				 ctx.drawImage(img,10,10);
			}

---

二 Canvas的相关方法及属性

颜色、样式和阴影

线条样式 

矩形

路径

转换

文本

图像绘制

drawImage()

向画布上绘制图像、画布或视频。

像素操作

 

width	返回 ImageData 对象的宽度。
height	返回 ImageData 对象的高度。
data	返回一个对象，其包含指定的 ImageData 对象的图像数据。

createImageData()	创建新的、空白的 ImageData 对象。
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上。

合成

globalAlpha	设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上。

其他

save()	保存当前环境的状态。
restore()	返回之前保存过的路径状态和属性。
createEvent()
getContext()
toDataURL()