HTML
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
</head>
<body>
<image src="bd_logo1.png" width='50' height='50' />
<canvas id='drawing' width="800" height="800" style="border:1px solid #c3c3c3;">A drawing of something.</canvas>
<canvas id="drawing2" width="800" height="300"></canvas>
<script type="text/javascript" src="canvas.js" ></script>
</body>
</html>
JS
//15.1 基本用法
var drawing = document.getElementById('drawing');
// if(drawing.getContext){
// var context = drawing.getContext('2d');
// var imgURI =drawing.toDataURL('image/png');
// var image = document.createElement('img');
// image.src = imgURI;
// document.body.appendChild(image);
// }
//15.2 2D上下文
//15.2.1 填充和描边
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
var context = drawing.getContext("2d");
context.strokeStyle = 'red';
context.fillStyle = '#0000ff';
context.stroke();
}
//15.2.2 绘制矩形
if (drawing.getContext) {
var context = drawing.getContext('2d');
/*
*根据Mozilla的文档
*http://developer.mozilla.org/en/docs/Cavans_tutorial:Basic_usage
*/
//绘制红色矩形
context.strokeStyle = '#FF0000';
context.strokeRect(10, 10, 50, 50);
//绘制半透明的蓝色矩形
context.strokeStyle = 'rgba(0,0,255,0.5)';
context.strokeRect(30, 30, 50, 50);
//在两个小矩形重叠的地方清除小矩形
context.clearRect(40, 40, 10, 10);
}
//15.2.3 绘制路径
// arc(x,y,radius,startAngle,endAngle,counterclocwise)
// 以(x,y)为圆心绘制一条弧线，弧线半径为radius 起始和结束角度(用弧度表示) 分别为startAngle 和endAngle.
// counterclockwise 表示startAngle 和 endAngle是否按逆时针计算，值为false表示顺时针
//arcTo(x1,y1,x2,y2,radius) //从上一点开始绘制一条弧线，到（x2,y2)为止，并且以给定半径radius 穿过（x1,y1)
//bezierCurveTo(c1x,c1y,c2x,c2y,x,y) //从上一点开始绘制一条曲线，到(x,y)为止，并且以（c1x,c1y)和（c2x,c2y)为控制点
//lineTo(x,y) 从上一点开始绘制一条直线，到（x,y)为止。
//moveTo(x,y) 将绘图游标移动到(x,y) , 不画线
//quedraticCurveTo(cx,cy,x,y) 从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy) 作为控制点
//rect(x,y,width,height) 从点(x,y)开始绘制一个矩形，宽度和高度分别是width和height指定，
if (drawing.getContext) {
var context = drawing.getContext("2d");
//开始路径
context.beginPath();
//绘制外圆
context.arc(100, 100, 99, 0, Math.PI * 2, false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//绘制分针
context.moveTo(100,100);
context.lineTo(100,15);
//绘制时针
context.moveTo(100,100);
context.lineTo(35,100);
//描边路径
context.strokeStyle = '#FF0000';
context.stroke();
}
//15.2.4 绘制文本
if (drawing.getContext) {
var context = drawing.getContext("2d");
context.font ='bold 14px Arial';
context.textAlign ='center';
context.textBaseLine ='middle';
context.fillText('12',100,20);
//起点对齐
context.textAlign ='start';
context.fillText('12',100,40);
//终点对齐
context.textAlign ='end';
context.fillText('12',100,60);
}
//15.2.5 变换
//rotate(angle) 围绕原点旋转图像angle弧度
//scale(scaleX,scaleY) 缩放图像，在x方向乘以sacelX,在y方向乘以scaleY,sacelX,scaleY 默认值是1.0
//translate(x,y) 将坐标原点移动到(x,y),只想这个变换后，坐标会变成之前由（x,y) 点 相当于平移变换
// transform(m1_1,m1_m2,m2_1.m2_2,dx,dy) 直接修改变换矩阵，方式乘以如下矩阵
// m1_1 m1_2 dx
// m2_1 m2_2 dy
// 0 0 1;
//上述是一个旋转+平移矩阵， 实际上是先以原点旋转 ,再平移 dx dy 上述是一个3*3矩阵
// sina y1 dx
// x1 cosa dy
// 0 0 1 大概是这样的有点忘记矩阵
//假设 x 轴上 x1:100，y1:0 顺时针旋转90° 通过三角函数求 x2,y2
//则 x2= math.sqrt(x1*2+y1*2)*cosa y2= math.sqrt(x1*2+y1*2)*sina
//旋转90 则刚好 x2=0 y2=100
//利用平移变换画图
if(drawing.getContext){
var context = drawing.getContext("2d");
context.translate(200,200); //先利用平移避开之前画的，以便区分。平移是叠加。
//开始路径
context.beginPath();
//画员外圆
context.arc(100,100,99,0,2*Math.PI,false); //圆心位置实际上是200+100
//绘制内圆
context.moveTo(194,100); //画笔起点平移x 方向6单位
context.arc(100,100,94,0,2*Math.PI,false); //圆心不变，画同心圆，半径缩小6和画笔位置重合。
//变换原点
context.translate(100,100); //圆心位置变成200+100+100 =400
//旋转表针
context.rotate(1); //旋转变换90度，后面画的按正常坐标画完后旋转90
//绘制分针
context.moveTo(0,0); //此处lineTo(0,0) 实际上是去到绝对原点的300，300
context.lineTo(0,-85);
//绘制时针
context.moveTo(0,0);
context.lineTo(-65,0);
//描边路径
context.stroke();
//context.restore(); 再保存设置的结果中向前以及返回
}
//15.2.6 绘制图像
var image = document.images[0];
//context.drawImage(image,10,10); //画一个图画到哪个位置 实际位置是310，310 并且再旋转90 因为上面旋转了90
context.drawImage(image,10,10,50,50); //指定w h
//context.drawImage() 最多9个参数 要绘制的源图像，源图像x坐标，源图像y坐标,源图像宽度，源图像高度，目标图像x 目标图像y,目标图像宽度，目标图像高度
//15.2.7 阴影
var drawing2 = document.getElementById('drawing2');
var context2 = drawing2.getContext('2d');
//设置阴影
context2.shadowOffsetX =5;
context2.shadowOffsetY =5;
context2.shadowBlur =4;
context2.shadowColor ='rgba(0,0,0,0.5)';
//绘制红色矩形
context2.fillStyle ='#ff0000';
context2.fillRect(10,10,50,50);
//绘制蓝色矩形
context2.fillStyle ='rgba(0,0,255,1)';
context2.fillRect(30,30,50,50);
//15.2.8 渐变
var gradient1 = context2.createLinearGradient(50,50,70,70);
gradient1.addColorStop(0,'white');
gradient1.addColorStop(1,'black');
var gradient2 = context2.createRadialGradient(125,125,10,125,125,30); //同心圆向外渐变
gradient2.addColorStop(0,'white');
gradient2.addColorStop(1,'black');
//绘制渐变矩形
context2.fillStyle =gradient1;
context2.fillRect(50,50,50,50);
context2.fillStyle =gradient2;
context2.fillRect(100,100,50,50);
//context2.stroke();
//15.2.9 模式
var image =document.images[0];
// image.width=50;
// image.height =50;
var pattern = context2.createPattern(image,'repeat'); //repeat repeat-x repeat-y no-repeat
context2.fillStyle =pattern;
context2.fillRect(200,200,150,150);
//15.2.10 使用图像数据
var imageData = context2.getImageData(100,100,50,50); //取得坐标位置宽度和长度的区域的数据
var data = imageData.data;
var red =data[0],green=data[1],blue=data[2],alpha=data[3];
data[0] =255;//设置图像数据
imageData.data =data;
context2.putImageData(imageData,0,0);//写图像数据到位置
//15.2.11 合成
context2.globaAlpha =0.5;