Canvas笔记——动态添加视图树

canvas标签

<canvas></canvas>

• canvas本身并没有任何的绘图能力，所有的绘图工作都是通过js来实现的

• 最好在一开始的时候就设置canvas的宽高，若不设定浏览器会默认设置canvas大小为宽300，高100像素，建议直接在canvas标签的内部设置

  <canvas id="myCanvas" width="200" height="200"></canvas>

• canvas相当于是一个画布，超过画布的内容不可见

• .getContext()是canvas的绘图对象，接受一个参数用于获取canvas的绘图环境，例如.getContext(“2d”)表示该canvas的绘图环境为2D（目前H5只支持2D环境）

简单图形

直线

    <canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">       您的浏览器不支持canvas，建议使用最新版的Chrome    </canvas>    <script>        var c = document.getElementById("myCanvas");        var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象        ctx.moveTo(0,0);   //定义绘画开始的位置        ctx.lineTo(150,50);  //画一条直线，结束点坐标是x=150,y=50        ctx.lineTo(20,100); //画一条直线，起点为之前画笔停留的坐标        ctx.strokeStyle = "blue";    //设定描边颜色为蓝色        ctx.stroke();  //描边，这个时候才能画出图形        ctx.beginPath();//重新开始一个路径，之前的设置会失效        ctx.moveTo(90,90);         ctx.lineTo(80,150);        ctx.lineTo(120,180);        ctx.lineJoin("round");//设置交接处为圆角，miter：尖角(默认),bevel：斜角        ctx.lineWidth = 8;//设置线段的宽度        ctx.strokeStyle = "red";    //设定描边颜色为红色        ctx.stroke();      </script>

矩形和多边形

    var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象    ctx.fillRect(10,10,50,50);   //从画布上的(10,10)坐标点为起始点，绘制一个宽高均为50px的实心矩形    ctx.strokeRect(70,10,50,50);   //从画布上的(70,10)坐标点为起始点，绘制一个宽高均为50px的描边矩形    //也可以通过Rect(x,y,width,height)的方法创建矩形路径，再通过.stroke()或.fill()的方法给矩形上色    ctx.rect(20,20,150,100);  //创建矩形路径    ctx.stroke();    //描边    ctx.beginPath();    //重置画笔，避免污染    ctx.rect(50,90,50,50);  //创建矩形路径    ctx.fill();    //填充    //ctx.clearRect(x,y,width,height) 类似橡皮擦的功能，不会清楚之前定义过的样式    ctx.clearRect(20,20,80,50);  //擦除以（20,20）坐标为起点，宽高为80*50的区域    //绘制多边形    ctx.moveTo(10,10);    ctx.lineTo(100,30);    ctx.lineTo(120,80);    ctx.lineTo(60,60);    ctx.lineTo(10,10);    ctx.closePath();  //闭合多边形路径    ctx.stroke();  //描边    ctx.fill();    //填充

圆和圆弧

    //圆弧的绘制    //ctx.arc(圆心x坐标,圆心y坐标,圆的半径r,开始角度,结束角度)    ctx.arc( 80, 80, 40, 1/6*Math.PI, 1/2*Math.PI);//Math.PI为180°    ctx.stroke();  //描边    //圆形    ctx.arc( 80, 80, 40, 0, 2*Math.PI);    ctx.lineWidth = 3;  //描边宽度为3px    ctx.strokeStyle = "yellow";//设置描边的颜色    ctx.stroke();  //描边    ctx.fillStyle = "#4DA6FF";//设置填充的颜色    ctx.fill(); //填充颜色    //两条线段之间连接起一条弧线    //ctx.arcTo(起点切线末端x坐标,起点切线末端y坐标,终点x坐标,终点y坐标,圆的半径r)    ctx.moveTo(20,20);    ctx.lineTo(60,20);    ctx.arcTo(100,20,100,60,40); // 创建圆弧路径    ctx.lineTo(100,100);    ctx.stroke();   

文本

    //ctx.strokeText(文本内容,起点x坐标,起点y坐标) 空心文本    //ctx.fillText(文本内容,起点x坐标,起点y坐标) 实心文本    var gradient=ctx.createLinearGradient(0,0,c.width,c.height);    gradient.addColorStop("0","green");    gradient.addColorStop("1","rgba(200,255,10,0.5)");    ctx.fillStyle=gradient;    ctx.strokeStyle= "red";    ctx.font="italic 30px Arial bold";//定义字体样式    ctx.fillText("fillText",50,10);    ctx.strokeText("strokeText",50,70);    //注意：canvas默认文本在垂直方向是底部对齐的，可以通过textBaseline来改变文本在垂直方向的基线位置    ctx.textBaseline="alphabetic"; //默认，文本基线是普通的字母基线    ctx.textBaseline="top"; //设置文本的基线为顶部    ctx.textBaseline="hanging"; //设置文本的基线为悬挂基线    ctx.textBaseline="middle"; //设置文本的基线垂直居中于文本框    ctx.textBaseline="ideographic"; //设置文本的基线为表意基线    ctx.textBaseline="bottom"; //设置文本的基线为底端    //设置文本在水平方向的对齐方式    ctx.textAlign="start";//默认值，从起点坐标x位置开始绘制文本    ctx.textAlign="end";//从文本结束位置为起点坐标x位置    ctx.textAlign="left";//同start    ctx.textAlign="right";//同end    ctx.textAlign="center";//以起点坐标x为居中对齐基线来绘制文本    //获取文本的宽度    ctx.measureText("文本").width;    //给文本添加投影    ctx.shadowColor = "blue";  //定义投影颜色为蓝色    ctx.shadowBlur = 15;   //定义投影模糊阶数为15像素    ctx.shadowOffsetX = 10;//投影在横坐标上的偏移    ctx.shadowOffsetY = -40;//设置投影在纵坐标上的偏移

图片的绘制

    //ctx.drawImage(img,[开始剪切的x坐标的位置],[开始剪切的y坐标的位置],[剪切图像的宽度],[剪切图像的高度],放置图像的x坐标,放置图像的y坐标,[使用图像的宽度],[使用图像的高度])    var c = document.getElementById("myCanvas");    var ctx = c.getContext("2d");    var img = new Image();    img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";    img.onload = function(){        ctx.drawImage(img,10,20,300,300,30,30,250,150);  //在画布坐标（30,30）的位置绘制一张宽度为250、高度150的图片，这种图片是在img上坐标为（10,20）的位置所裁剪出来的宽高均为300的区域    }    //剪切图片的部分区域    ctx.rect(60,60,100,100); //绘制裁剪区域（一个矩形）    ctx.clip(); //设置上一个闭合路径为裁剪蒙板    var img = new Image();    img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";    img.onload = function(){        ctx.drawImage(img,10,20);     }    //缩放当前绘制的对象    ctx.scale(1.2,1.2);//宽度和高度都缩放1.2倍    //旋转    ctx.rotate(1/6*Math.PI);    //位移    ctx.translate(50,-30);  //在x轴方向做50px的向右位移，在y轴方向做30px的向上位移    //透明度    ctx.globalAlpha = 0.5; //0-1，1为完全不透明

实例：

实现了一个视图树的功能，可以动态的添加/删除节点

下载地址：
http://download.csdn.net/detail/benhuo931115/9706620

参考：
http://www.cnblogs.com/vajoy/p/3887608.html