定制小程序开发H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制

目录

1. canvas 简介

        canvas 是HTML5 定制小程序开发提供的一种新标签 <canvas></canvas>，与 div 类似，定制小程序开发是一个矩形的画布，定制小程序开发它可以支持 JavaScript 定制小程序开发在上面绘画，定制小程序开发控制每一个像素；canvas 定制小程序开发拥有多种绘制路径、矩形、圆形、定制小程序开发字符以及添加图像的方法，定制小程序开发可以使得页面更加丰富多彩。当前 canvas 定制小程序开发广泛应用于游戏、定制小程序开发可视化数据(echarts)、定制小程序开发广告等领域。

2. canvas 标签介绍

        canvas 其实就是一个普通的 HTML 标签，需要进行闭合，可以设置宽高、背景色属性，但宽高单位必须是 px，否则就会被忽略；一个 canvas 默认为 300*150 像素。

        需要注意 canvas 元素的宽高必须使用它自带的属性进行设置，而不要用 CSS 选择器控制 canvas 的宽高，否则会造成图像拉伸，除宽高之外的其余属性则可用 CSS。如下简单案例：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>canvas标签</title>
  7.   <style>
  8.     #can1 {
  9.       background-color: cadetblue;
  10.       border: 2px solid red;
  11.     }
  12.   </style>
  13. </head>
  14.  
  15. <body>
  16.   <!-- 设置宽高使用canvas标签的属性 -->
  17.   <canvas id="can1" width="300px" height="150px"></canvas>
  18. </body>
  19.  
  20. </html>

效果如下：

3. canvas 上下文 Context

        Context 是 canvas 的上下文，也就是绘制环境，它是所有绘制操作 api 的入口或者集合；canvas 本身是无法绘制任何内容的，需要使用 JavaScript 进行操作。而 Context 正是 JavaScript 操作 canvas 的接口。

获取上下文分为两步：首先获取 canvas 标签，然后再获取该标签的上下文；

  1. <script>
  2.   // 1.DOM操作获取canvas标签
  3.   var canvas = document.getElementById('can1');
  4.   // 2.获取canvas的上下文（2d渲染）
  5.   var ctx = canvas.getContext('2d');
  6. </script>

获取 canvas 上下文之后，就可以在画布上进行图形绘制了；上下文 Context 相关属性如下：

（ctx 是博主定义的获取到的上下文 Context 的变量名，可以随意更换，以下介绍都用ctx）

  • ctx.moveTo(x,y)；将画笔移动到坐标(x,y)位置

  • ctx.lineTo(x,y)；从当前位置绘制直线到坐标(x,y)位置

  • ctx.closePath()；关闭路径，闭合线条

  • ctx.lineWidth；线宽

  • ctx.strokeStyle；描边颜色，必须用于描边之前

  • ctx.stroke()；渲染直线，相当于描边

  • ctx.fillStyle；填充颜色，必须用于填充之前

  • ctx.fill()；填充，默认为黑色

接下来我们结合这些属性绘制一个简单的正方形：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>canvas标签</title>
  7.   <style>
  8.     #can1 {
  9.       background-color: rgb(204, 216, 216);
  10.       border: 2px solid red;
  11.     }
  12.   </style>
  13. </head>
  14.  
  15. <body>
  16.   <!-- 设置宽高使用canvas标签的属性 -->
  17.   <canvas id="can1" width="600px" height="500px"></canvas>
  18. </body>
  19.  
  20. <script>
  21.   // DOM操作获取canvas标签
  22.   var canvas = document.getElementById('can1');
  23.   // 获取canvas的上下文（2d渲染）
  24.   var ctx = canvas.getContext('2d');
  25.   // 绘制长方形
  26.   ctx.moveTo(100, 100); //将画笔移动到坐标 100 100
  27.   ctx.lineTo(200, 100); //从画笔位置绘制直线到坐标 200 100
  28.   ctx.lineTo(200, 200); //从当前位置绘制直线到 200 200
  29.   ctx.lineTo(100, 200); //.从当前位置...
  30.   ctx.closePath(); //闭合线条
  31.  
  32.   ctx.lineWidth = 6; //线宽
  33.  
  34.   ctx.strokeStyle = 'red'; //描边颜色
  35.   ctx.stroke(); //渲染直线(描边)
  36.  
  37.   ctx.fillStyle = 'blue'; //填充颜色
  38.   ctx.fill(); //填充
  39. </script>
  40.  
  41. </html>

效果如下：

4. 案例：在 canvas 画布中绘制表格

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>案例：绘制表格</title>
  7.   <style></style>
  8. </head>
  9.  
  10. <body>
  11.   <div>
  12.     <canvas id="table"></canvas>
  13.   </div>
  14. </body>
  15. <script>
  16.   (function () {
  17.     var canvas = document.getElementById('table'); //获取canvas标签
  18.     var ctx = canvas.getContext('2d'); //获取上下文
  19.  
  20.     //设置画布宽高、边框（边框也可使用CSS选择器来设定）
  21.     canvas.width = 600;
  22.     canvas.height = 400;
  23.     canvas.style.border = '2px solid #000';
  24.     //设置上下文样式
  25.     ctx.lineWidth = .5;
  26.     ctx.strokeStyle = '#999';
  27.  
  28.     //绘制表格
  29.     var rect_hei = 20; //定义每一行高20px
  30.     var rect_wit = 40; //定义每一列宽40px
  31.  
  32.     for (var i = 0; i < canvas.width / rect_hei; i++) { //循环绘制
  33.       //绘制横线
  34.       ctx.moveTo(0, i * rect_hei); //从x轴为0的位置开始，每隔一个行高便绘制横线
  35.       ctx.lineTo(canvas.width, i * rect_hei);
  36.       ctx.stroke();
  37.  
  38.       //绘制竖线
  39.       ctx.moveTo(i * rect_wit, 0); //从y轴为0的位置开始，每隔一个列宽便绘制竖线
  40.       ctx.lineTo(i * rect_wit, canvas.height);
  41.       ctx.stroke();
  42.     }
  43.   }())
  44. </script>
  45.  
  46. </html>

效果如下：

5. canvas 的 beginPath 状态

        需要知道，在 canvas 画布中绘制图形是基于状态的，意思就是说如果前面已经设置了描边颜色属性 strokeStyle 为某个颜色，那么在这之后的绘制当中，所有线条都会是这个颜色；如果再次设置描边颜色，则所有线条都会成为最新设置的颜色，前面设置的都被覆盖，无法做到颜色不一。如下：

而这个时候，为了能够绘制出不同颜色的线条，就需要使用到 beginPath 开启新状态；

  • ctx.beginPath()；开启新状态的绘图，前面的设置不会被覆盖；新状态可以继承之前状态的样式，但是在新状态中设置的样式就只能作用在新状态当中。

如下案例：

6. 绘制矩形 rect

        如果只是按照步骤：起点 --> 画线 --> 描边 一步一步的绘制一个矩形的话，就太麻烦了，canvas 也提供了一种快速绘制矩形的方法 rect，并且提供了各种属性。语法如下：

  • ctx.rect(x, y, width, height)；x, y为矩形左上角坐标， width 和 height 以像素 px 为单位，该语法只规定了矩形的路径，没有填充和描边。
  • ctx.strokeRect(x, y, width, height)；描边矩形，结合绘制与描边。
  • ctx.fillRect(x, y, width, height)；填充矩形，结合绘制与填充
  • ctx.clearRect(x, y, width, height)；清除矩形，相当于橡皮擦，在该矩形范围内的图像都会被擦除。

我们使用 rect 语法绘制一个矩形，只需一句代码即可：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>绘制矩形</title>
  7.   <style></style>
  8. </head>
  9.  
  10. <body>
  11.   <div>
  12.     <canvas id="table"></canvas>
  13.   </div>
  14. </body>
  15. <script>
  16.   var canvas = document.getElementById('table'); //获取canvas标签
  17.   var ctx = canvas.getContext('2d'); //获取上下文
  18.  
  19.   //设置画布宽高、边框（边框也可使用CSS选择器来设定）
  20.   canvas.width = 600;
  21.   canvas.height = 400;
  22.   canvas.style.border = '2px solid #000';
  23.  
  24.   //快速绘制矩形
  25.   ctx.rect(100, 100, 50, 50);
  26.   ctx.stroke();
  27.  
  28.   //描边矩形
  29.   ctx.strokeRect(200, 100, 50, 50);
  30.  
  31.   //填充矩形
  32.   ctx.fillRect(300, 100, 50, 50);
  33. </script>
  34.  
  35. </html>

效果如下：

7. 绘制圆形

  • ctx.arc(x,y,r,sAngle,eAngle,counterclockwise)；x、y 为圆心点坐标；r 半径；sAngle 开始角度，圆心到最右边点为 0 度，顺时针方向依次增大；eAngle 结束角度，注意用的是弧度 Π(180°)；counterclockwise：是否是逆时针，true 是逆时针，false 顺时针。

接下来，我们使用 arc 绘制一个圆弧，效果如下：

（提示：弧度与角度的转换公式，角度 = 度数 * Math.PI / 180）

8. 案例：根据一组数据绘制

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>绘制饼状图</title>
  7.   <style></style>
  8. </head>
  9.  
  10. <body>
  11.   <div>
  12.     <canvas id="table"></canvas>
  13.   </div>
  14. </body>
  15. <script>
  16.   var canvas = document.getElementById('table'); //获取canvas标签
  17.   var ctx = canvas.getContext('2d'); //获取上下文
  18.  
  19.   //设置画布宽高、边框（边框也可使用CSS选择器来设定）
  20.   canvas.width = 600;
  21.   canvas.height = 400;
  22.   canvas.style.border = '2px solid #000';
  23.  
  24.   //定义饼状图数据
  25.   var data = [{
  26.       'value': 0.2,
  27.       'color': '#149985',
  28.       'title': '城市A'
  29.     },
  30.     {
  31.       'value': 0.3,
  32.       'color': 'red',
  33.       'title': '城市B'
  34.     },
  35.     {
  36.       'value': 0.4,
  37.       'color': 'blue',
  38.       'title': '城市C'
  39.     },
  40.     {
  41.       'value': 0.1,
  42.       'color': '#999999',
  43.       'title': '城市D'
  44.     },
  45.   ]
  46.  
  47.   //绘制饼状图
  48.   var tempAngle = -90; //从-90°开始绘制
  49.   for (var i = 0; i < data.length; i++) {
  50.     ctx.beginPath(); //每一次循环都绘制不同的扇区，所以都要开启新状态
  51.     ctx.moveTo(200, 200); //每一次都回到圆心点开始绘制
  52.     var angle = data[i].value * 360; //每一个扇区的角度
  53.     ctx.fillStyle = data[i].color; //颜色填充按照数据遍历
  54.     var startAngle = tempAngle * Math.PI / 180; //起始角度
  55.     var endAngle = (tempAngle + angle) * Math.PI / 180; //每一次的结束角度=起始角度+扇区角度
  56.     ctx.arc(200, 200, 100, startAngle, endAngle);
  57.     tempAngle = tempAngle + angle; //每次绘制完一次扇区起始角度为原角度加该扇区角度
  58.     ctx.fill();
  59.   }
  60. </script>
  61.  
  62. </html>

案例效果如下：

饼状图文字的绘制等参见下期：

小结：canvas 绘制基本步骤

  • 获得上下文：canvas.getContext('2d')
  • 开始新状态绘制：ctx.beginPath()
  • 画笔起始点：ctx.moveTo(x, y)
  • 绘制线：ctx.lineTo(x, y)
  • 闭合路径：ctx.closePath()
  • 描边：ctx.stroke()

三篇文章速通 canvas：

➡️ 
➡️
➡️ 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发