javascript权威指南第15章 使用Canvas绘图

HTML

    
        
    
    
        
        A drawing of something.
        
        
    

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 填充和描边
//确定浏览器支持元素
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;