canvas画布

系统管理员 2023-08-17 16:25 123阅读 0赞

# canvas标签 #

接下来使用支持H5的浏览器打开该页面，将会看到如下内容：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
**canvas画布标签兼容处理**：  
如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。

<canvas>您的浏览器不支持canvas标签</canvas>

> **结果分析**：  
> 由上述结果可以分析出，在H5中，canvas标签本身并没有任何行为，仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布，还需要使用js提供的API编写相应的代码从而在这块画布上绘制出图形。  
> **通俗理解**：  
> canvas就是一块画布，可以使用**js当画笔在上面绘画**，可以显示在网页上。

### canvas标签常用属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>无（为画布起一个id名称）</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>300（设置canvas的高度）</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>150（设置canvas的宽度）</td> 
  </tr> 
 </tbody> 
</table>

**注意**：

1.  如果浏览器不兼容，也可以使用flash等手段进行**优雅降级**
2.  不能使用**CSS样式控制canvas元素的宽高，否则会导致绘制的图形拉伸**
3.  重新设置canvas标签的宽高属性会导致画布擦除所有的内容
4.  可以给canvas画布设置背景色

**画布宽高注意事项**：

1.  canvas画布是一个行内块级元素，该元素默认的宽高为300\*150，可以通过元素的width属性和height属性改变默认的宽高。
2.  不能使用CSS样式控制canvas元素宽高，否则会导致绘制的图形拉伸
3.  原因：因为canvas的默认高度是300\*150，所以如果使用css为canvas设置width和height，会导致canvas绘制的图像被压缩。所以开发中使用width与height属性来设置canvas的宽高，而不是通过CSS。

**canvas的平面坐标系**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]  
**canvas的角度坐标系**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

### 图形绘制基本步骤： ###

*  第1步：获取画布对象：var canvas = **document.querySelector(’…’);**
 *  第2步：获得上下文即画笔：var ctx = **canvas.getContext(‘2d’);**
 *  第3步：记录绘制起始点：ctx.**moveTo(sx, sy);**
 *  第4步：绘制线至终点：ctx.**lineTo(dx, dy);**
 *  第5步：封闭路径：ctx.**closePath();**
 *  第6步：**绘制**描边确定直线中起点和端点的连线：**ctx.stroke();**

### JavaScript脚本中< canvas >常用操作 ###

<table> 
 <thead> 
  <tr> 
   <th>操作</th> 
   <th>JavaScript代码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>获取画布</td> 
   <td>var canvas=document.getElementById(“canvas”);</td> 
  </tr> 
  <tr> 
   <td>获取画笔</td> 
   <td>var ctx=canvas.getContext(“2d”);</td> 
  </tr> 
  <tr> 
   <td>设置画布宽度</td> 
   <td>canvas.width=600;</td> 
  </tr> 
  <tr> 
   <td>设置画布高度</td> 
   <td>canvas.height=400;</td> 
  </tr> 
  <tr> 
   <td>获取画布宽度</td> 
   <td>var canvasWidth=canvas.offsetWidth;</td> 
  </tr> 
  <tr> 
   <td>获取画布高度</td> 
   <td>var canvasHeight=canvas.offsetHeight;</td> 
  </tr> 
 </tbody> 
</table>

##### 基本图形绘制—矩形 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]

<canvas id="canvas">您的浏览器不支持canvas标签</canvas>
        <script>
            //1、获取画布对象
            var canvas = document.querySelector("#canvas");
            //2、获得上下文，即画笔
            var ctx = canvas.getContext("2d");
            //重新设置标签的属性宽高，注意：不要用canvas.style.height
            canvas.width = 300;
            canvas.height = 250;
            // 绘制矩形
            ctx.beginPath();
            ctx.strokeRect(10,10,250,200);//绘制边线矩形
            ctx.rect(15,15,200,150);//绘制普通矩形
            // （rect()方法只是规划了矩形的路径，并没有填充和描边，需要单独描边或填充）
            //快速创建一个描边的矩形
            ctx.fillStyle = "lightblue";//填充前，可以设置填充的颜色
            ctx.fillRect(20,20,180,100);//绘制填充矩形；
            //清除矩形
            ctx.clearRect(25,25,50,50);
            ctx.stroke();//绘制
        </script>

##### 案例1：tree树 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tree</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            canvas{
                border: 1px solid gray;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas">您的浏览器不支持canvas标签</canvas>
        <script>
            // 1、获取画布
            var canvas = document.querySelector("#canvas");
            // 2、获取下文对象CanvasRenderingContext2D，即画笔
            var ctx = canvas.getContext("2d");
            canvas.width = 500;
            canvas.height = 600;
            // 3、绘制直线
            ctx.beginPath();//开始绘制，开始路径规划
            ctx.moveTo(250,50);//绘制直线的起点
            ctx.lineTo(110,150);//绘制直线的端点
            ctx.lineTo(200,150);
            ctx.lineTo(80,250);
            ctx.lineTo(200,250);
            ctx.lineTo(50,350);
            ctx.lineTo(230,350);
    
            ctx.lineTo(230,480);
            ctx.lineTo(270,480);
            ctx.lineTo(270,350);
    
            ctx.lineTo(450,350);
            ctx.lineTo(300,250);
            ctx.lineTo(420,250);
            ctx.lineTo(300,150);
            ctx.lineTo(390,150);
            // ctx.lineTo(250,50);
            ctx.closePath();//封闭路径
            ctx.lineWidth = 1.0;//设置线宽
            ctx.strokeStyle = "skyblue";//设置线的颜色
            ctx.stroke();//绘制
            ctx.fillStyle = "skyblue";//设置填充颜色
            ctx.fill();//填充图形
        </script>
    </body>
    </html>

##### 案例2：umbrella雨伞 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>雨伞</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #canvas{
                border: 1px solid gray;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            //1、获取画布
            var canvas = document.querySelector("#canvas");
            //2、获取上下文对象CanvasRenderingContext2D，即画笔
            var umbrella = canvas.getContext("2d");
            canvas.width = 400;
            canvas.height = 400;
            //3、绘制直线
            umbrella.beginPath();//开始绘制，开始路径规划（开始了一个新状态，新线径）
            umbrella.arc(200,150,100,0,Math.PI,true);
            umbrella.closePath();
            umbrella.lineWidth = 3.0;//设置线宽
            umbrella.strokeStyle = "#ff5857";//设置线的颜色
            umbrella.stroke();//绘制
            umbrella.fillStyle = "#ff5857"
            umbrella.fill();
    
            umbrella.beginPath();//开始绘制，开始路径规划（开始了一个新状态，新线径）
            /*这里着重强调下 beginPath: 核心的作用是将不同绘制的形状进行隔离，
            *每次执行此方法，表示重新绘制一个路径，
            *跟之前的绘制的墨迹可以进行分开样式设置和管理。
            *新状态可以继承之前状态的样式，但是当前状态设置的所有样式只能用于当前状态。
            */
            umbrella.moveTo(200,150);
            umbrella.lineTo(200,280);
            umbrella.arc(180,285,20,0,Math.PI,false);
            umbrella.lineWidth = 3.0;//设置线宽
            umbrella.strokeStyle = "#ff5857";//设置线的颜色
            umbrella.stroke();//绘制
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: /images/20230810/905470269ddf45e0beebb7b2af3562f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: /images/20230810/5286529cacbb4c54b103e50432266b0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: /images/20230810/62ed84ce8f254f5aac87728d37c766bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: /images/20230810/26b05d03f7524a85b7b0b9a7ca156782.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: /images/20230810/179fb74f279842a193ecb9020b7216d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]: /images/20230810/093efdd0626643a5a71e6bb0db62ffd0.png