学习Canvas技术

📗​​​​​​​目录

一、什么是canvas

二、创建使用canvas元素

2.1、创建canvas元素 

2.2、画线 

2.3、路径与closePath，beginPath,fill

2.3、绘制矩形

---

🔴一、什么是canvas

　　<canvas>标签是 HTML5 中的新标签，像所有的 dom 对象一样它有自己本身的属性、方法和事件。操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。

<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。

注意：Internet Explorer 8 以及更早的版本不支持 <canvas> 标签。Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 标签。

🔴二、创建使用canvas元素

2.1、创建canvas元素 

<canvas id="can" width="800"  height="600">不支持Canvas</canvas>

以上代码创建了一个宽度为800像素，高度为600像素的canvas。不建议使用CSS样式指定宽度和高度。
canvas标签中间的内容为替代显示内容，当浏览器不支持canvas标签时会显示出来。 

创建了canvas元素后，要在canvas元素上面绘制图象，首先必须获取canvas环境上下文：

语法：

• canvas.getContext(画布上绘制的类型)
• 2d： 表示2维
• experimental-webgl： 表示试验版3维
• webgl：表示3维

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字

 <canvas id="canvas1" width="800" height="600"></canvas>
        <script type="text/javascript">
           //获得画布元素
            var canvas1=document.getElementById("canvas1");
            //获得2维绘图的上下文
            var ctx=canvas1.getContext("2d");
            
            //设置线宽
            ctx.lineWidth=10;
            //设置线的颜色
            ctx.strokeStyle="blue";
            
            //将画笔移动到00点
            ctx.moveTo(0,0);
            //画线到800，600的坐标
            ctx.lineTo(800,600);
            
            //执行画线
            ctx.stroke();
        </script>

2.2、画线 

.moveTo(x坐标 , y坐标)     把画笔移动到x,y坐标，建立新的子路径。

.lineTo(x坐标 , y坐标)    建立上一个点到x,y坐标的直线，如果没有上一个点，则等同于moveTo(x,y)，把（x,y）添加到子路径中。  顾名思义，就是画一条直线到某个点，很好理解。

.stroke()     描边方法 描绘子路径

<script>
var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象

ctx.moveTo(0,0);   //咱把“画笔”移到坐标(0,0)

ctx.lineTo(150,50);  //从上个点(0,0)画一条直线，结束点坐标是(150,50)

ctx.lineTo(20,100);  //从上个点(150,50)继续画一条直线，结束点坐标是(20,100)

ctx.moveTo(90,90);   //咱把“画笔”移到坐标(90,90)


ctx.strokeStyle = "red";    //设定描边颜色为红色，只要写在.stroke()方法前面即可

ctx.stroke();  //描边

</script>

2.3、路径与closePath，beginPath,fill

canvas的环境上下文中总有唯一一个路径，路径包含多个子路径，这些子路径可以看成是一系列点的集合。
beginPath()

清空子路径，一般用于开始路径的创建。在几次循环地创建路径的过程中，每次开始创建时都要调用beginPath函数。

closePath()

如果当前子路径是打开的，就关闭它。否则把子路径中的最后一个点和路径中的第一个点连接起来，形成闭合回路。

canvas绘图有两种模式，一种是fill，一种是stroke,fill是填充，stroke是描边线，fillstyle,strokeStyle指定绘图样式

2.3、绘制矩形

context.strokeRect(x,y,width,height)
以x,y为左上角，绘制宽度为width,高度为height的矩形。

context.fillRect(x,y,width,height)
以x,y为左上角，填充宽度为width,高度为height的矩形。

context.clearRect(x,y,width,height)
清除以x,y为左上角，宽度为width,高度为height的矩形区域。

 <script type="text/javascript">
            //获得画布元素
            var canvas1 = document.getElementById("canvas1");
            //获得2维绘图的上下文
            var ctx = canvas1.getContext("2d");

            //设置线宽
            ctx.lineWidth = 10;
            //设置线的颜色
            ctx.strokeStyle ="dodgerblue";
            
            //画一个空心的矩形，
            ctx.strokeRect(0,0,600,600);
            
            //画一个实心矩形
            ctx.fillStyle="aquamarine";
            ctx.fillRect(200,200,200,200);
            
            //清除指定的矩形区域
            ctx.clearRect(250,250,100,100);
        </script>