HTML5学习笔记——canvas元素

canvas元素是专门用来绘制图形的，它是一块无色透明的区域。相当于在页面中放置一块“画布”，可以在其中绘制图形，但是不是通过鼠标作画，而是需要利用javascript编写在其中进行绘画的脚本。

canvas元素需要指定ID、width、height三个属性；

a drawing of something

使用canvas元素，必须先设置width和height属性，出现在开始标签和结束标签的内容是后背信息，如果浏览器不支持canvas元素，就会显示这些信息；

 绘制矩形需要经过的步骤

1）取得canvas元素的DOM对象；

2）取得上下文；

图形上下文是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法获得图形上下文；

3）填充与绘制边框

绘图的两种方式：填充与绘制边框。

填充：指填满图形内部；

绘制边框：不填满图形内部，只绘制图形的外框。

4）设定绘图样式

绘图样式：主要针对图形的颜色而言；

填充的样式——fillstyle（填充的颜色值）

边框的样式——strokeStyle（填入边框的颜色）

5）指定线宽

使用图形上下文对象的lineWidth属性设置图形边框的宽度。

6）绘制矩形

fillRect（x,y,width,height）：填充矩形；

strokeRect(x,y,width,height)：绘制矩形边框；

   
   
  
  
  
  
  
canvas元素示例
  
  
  

7）擦除矩形区域

clearRect方法对矩形进行擦除，使得矩形区域之中的颜色全部变为透明；

context.clearRect(x,y,width,height);

 路径

1.绘制圆形

1)创建圆形路径的方法

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

x，y，radius表示的是起点横纵坐标以及半径；

startAngle：表示开始角度；

endAngle：表示结束角度；

anticlockwise：表示是否按逆时针方向进行绘制；true表示逆时针；false：表示顺时针方向；

arc方法不仅可以用来绘制图形，也可以用来绘制圆弧；

2）关闭路径后，路径的创建工作就完成了。但是还没有真正绘制任何图形；

3）绘制图形直接调用fill()（填充）或stroke()（绘制图形边框）。因为路径已经决定了图形的大小，所以就不需要再该方法中使用参数来指定图形大小了；

4）绘制椭圆的方法

context.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise)

radiusX为椭圆的横向半径；radiusY为椭圆的纵向半径；rotation：椭圆顺时针旋转角度；

	function draw(id){
		var canvas=document.getElementById(id);
		if (canvas==null) {
			return false;
		}
		var context=canvas.getContext("2d");
		context.fillStyle="#EEEEFF";
        context.fillRect(0, 0, 400,300);
        var n=0;
        for (var i = 0; i <10; i++) {
        	//开始创建路径
        	context.beginPath();
        	//绘制圆形
            context.arc(i*25, i*25, i*10,0,Math.PI*2,true);
            //绘制椭圆
            // context.ellipse(i*25, i*25, i*10,i*20,30,0,Math.PI*2,true);
            //图形创建完成关闭路径
            context.closePath();
            // 设定绘制样式
            context.fillStyle='rgba(255,0,0,0.25)';
            // 绘制图形
            context.fill();
        }
	}

圆形                                                                                                椭圆

    

5）不关闭路径会怎么样？

如果把以上例子中的开始创建路径和关闭路径两句删除，则会出现以下情况；

在画布中先是绘制一个深红色的半径最小的圆，然后每次半径变大的同时，颜色变淡。

原因：

因为已经创建的路径在绘制完图形后一直存在，通过for循环就相当于图形进行了一次又一次的绘制，第一个圆形实质上绘制了10次，所以图形颜色才会是上图效果；

注意：如果不关闭路径，已经创建的路径会永远保留着，就算用fill方法与stroke方法在页面上将图形已经绘制完毕，路径都不会消失。所以对于路径的何时开何时关要把握好。

2.绘制直线

1）moveTo(x,y) ：将光标移动到指定的坐标点，绘制直线的时候为起点；

2）lineTo(x,y)：在moveTo方法中指定的起点和参数中指定的直线终点之间绘制一条直线；

3）可以使用图形上下文对象的lineCap属性为直线添加线帽：

  ① butt：默认属性值，不为直线添加线帽；

  ② round：为直线添加圆形线帽；

  ③ square：为直线添加正方形线帽；

4）上下文对象的lineJoin属性指定两条直线交汇时的拐角形状；

  ① miter：默认值，创建尖角拐角；

  ② round：创建圆角拐角；

  ③ bevel：创建斜角拐角；

5）setLineDash(数组)自定义绘图时使用的虚线形状；

参数数组用于设置线段长度以及线段与线段之间距离的数值；

  ① 数组中只有一个数值时，表示线段长度以及线段与线段之间的距离等于该数值；

  ② 如果数值数量超过2，数组中的数值数量为偶数时，第奇数个数值代表线段长度，第偶数个为线段与线段之间的距离；

  ③ 如果数组数量大于1，且不为偶数时，浏览器自动数组中数值使得数组数量为偶数倍；

	function draw(id){
		var canvas=document.getElementById(id);
		if (canvas==null) {
			return false;
		}
		var context=canvas.getContext("2d");
		context.fillStyle="#EEEEFF";
        	//开始创建路径
        	context.beginPath();
        	context.lineWidth=10;
        	//添加圆形帽
        	context.lineCap="round";
            // 设定绘制样式
            context.moveTo(20, 20);
            context.lineTo(200, 20);
            context.stroke();
            context.closePath();
            context.beginPath();
        	context.lineWidth=10;
        	//添加正方形帽
        	context.lineCap="square";
        	// 起点
            context.moveTo(20, 100);
            // 直线终点
            context.lineTo(200, 100);
            // 绘制图形
            context.stroke();
            context.closePath();
            context.beginPath();
            context.lineWidth=10;
         //    //拐角形状
            context.lineJoin="round";
            // context.lineJoin="bevel";
            context.moveTo(250, 20);
            context.lineTo(250, 100);
            context.lineTo(350, 100);
            context.stroke();
            context.closePath();
	}

 

     

	function draw(id){
		var canvas=document.getElementById(id);
		if (canvas==null) {
			return false;
		}
		var context=canvas.getContext("2d");
		context.fillStyle="#EEEEFF";
        	   //    //设置线段与线段距离15像素
            context.beginPath();
            context.lineWidth=5;
            context.setLineDash([5]);
            context.moveTo(400, 20);
            context.lineTo(550, 20);
            context.stroke();
            context.closePath();

            context.beginPath();
            context.lineWidth=5;
            // 数值量为2个
            context.setLineDash([5,10]);
            context.moveTo(400, 45);
            context.lineTo(550, 45);
            context.stroke();
            context.closePath();
           // 数值量超过2个，且为偶数个
            context.beginPath();
            context.lineWidth=5;
            context.setLineDash([5,10,15,20]);
            context.moveTo(400, 70);
            context.lineTo(580, 70);
            context.stroke();
            context.closePath();
            //数值量大于1，且不为偶数
            context.beginPath();
            context.lineWidth=5;
            context.setLineDash([5,10,20]);
            context.moveTo(400, 100);
            context.lineTo(580, 100);
            context.stroke();
            context.closePath();
	}