HTML5 Canvas元素总结

前言

  ​<canvas>是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。
  ​HTML5 <canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

  ​<canvas>标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

1 canvas元素

  ​<canvas> 看起来和 标签一样，只是 <canvas>只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。
  ​如果不给<canvas> 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas>的宽高。

替换内容

  ​由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者浏览器不支持 HTML 元素 <canvas>，在这些浏览器上你应该总是能展示替代内容。

  ​​支持 <canvas>的浏览器会只渲染 <canvas>标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则 会直接渲染替代内容。

用文本替换：

2 getContext() 返回一个用于在画布上绘图的环境

getContext() 方法返回一个用于在画布上绘图的环境。
写法：

        Canvas.getContext(contextID);

  参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。

3 canvas图形绘制

3.1 矩形

<canvas>只支持一种原生的图形绘制：矩形。
canvast 提供了三种方法绘制矩形：
  1、fillRect(x, y, width, height)：绘制一个填充的矩形。
  2、strokeRect(x, y, width, height)：绘制一个矩形的边框。
  3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和高。

3.2 绘制路径 (path)

  图形的基本元素是路径。
  路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
  一个路径，甚至一个子路径，都是闭合的。
下面是需要用到的方法：

beginPath() 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径

moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。

closePath() 闭合路径之后，图形绘制命令又重新指向到上下文中

stroke() 通过线条来绘制图形轮廓

fill() 通过填充路径的内容区域生成实心的图形

3.3 绘制圆弧

有两个方法可以绘制圆弧：

arc(x, y, r, startAngle, endAngle, anticlockwise)

  arc(x, y, r, startAngle, endAngle, anticlockwise):以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true/1 表示逆时针，false/0 表示顺时针(默认是顺时针)。
Math.PI=180度，最好用几分之Math.PI表示度数（Math.PI/2=90度…）
  实际输出时console.log(Math.PI)=3.141592653589793。
注意：
  这里的度数都是弧度。
  0 弧度是指的 x 轴正方向。

arcTo(x1, y1, x2, y2, radius)

radians=(Math.PI/180)*degrees //角度转换成弧度
  arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

3.4 书写案例

参考菜鸟教程

    <script>
       window.onload=function(){
            //得到canvas
            var cvs  =document.getElementById("cvs")
            //判断浏览器兼容不兼容canvas
            if(cvs.getContext){
                var cvs_context = cvs.getContext('2d');
                //01 填充矩形
                cvs_context.fillStyle="pink"
                cvs_context.fillRect(100,100,100,100)

                //给矩形描边
                cvs_context.strokeStyle="green"
                cvs_context.lineWidth=3
                cvs_context.strokeRect(20,20,200,200);

                //清除矩形区域
                cvs_context.clearRect(120,120,60,60)
                //02 画线
                cvs_context.moveTo(250,100)  //移动画笔当前位置
                cvs_context.lineTo(300, 200);   //从画笔上次停留的位置画线段到当前位置
		    	cvs_context.strokeStyle = 'green';
			    cvs_context.stroke();

                //03 画三角形
                cvs_context.beginPath()
                cvs_context.moveTo(300,100)
                cvs_context.lineTo(400,0)
                cvs_context.lineTo(400,150)
                cvs_context.closePath()
                cvs_context.fill()
                cvs_context.stroke()
                //04 画弧线
                cvs_context.moveTo(500,100)
                /*
                                
                参数	描述
                x	圆的中心的 x 坐标。
                y	圆的中心的 y 坐标。
                r	圆的半径。
                sAngle	起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
                eAngle	结束角，以弧度计。
                counterclockwise	可选。规定应该逆时针还是顺时针绘图。false/0 = 顺时针，true/1 = 逆时针。

                */ 
                cvs_context.arc(450,100,50,0,Math.PI/2,0)
                cvs_context.stroke()
                // 画（椭圆）
                cvs_context.beginPath()
                cvs_context.arc(460,50,50,50,Math.PI)
                //05 画弧线
                cvs_context.stroke()
                //06 画半圆
                cvs_context.beginPath()
                cvs_context.arc(650,100,100,0,Math.PI,true)
                cvs_context.closePath() 
                cvs_context.fill()
                // cvs_context.fillStyle="red"
                //07 绘制图片
                var img=new Image()
                img.onload=function(){
                    cvs_context.drawImage(img,780,17)
                }

                img.src="./img_the_scream.jpg"

                //08 填充文字
                cvs_context.fillStyle="green"
                cvs_context.font="30px '微软雅黑'"
                cvs_context.fillText("xxxx今天天气很热",500,200)
            }
       }
    </script>
<body>
    <!-- 只渲染 <canvas> 标签，而忽略其中的替代内容。 -->
    <canvas id="cvs" width="1000"  height="600">
        您的浏览器不支持canvas
    </canvas>
</body>

效果图展示：