canvas学习笔记，canvas中的基本概念-图形样式

港控/mmm° 2022-12-01 01:19 194阅读 0赞

### 文章目录 ###

*  前言
 *  canvas创建
 *   *  js中的canvas
     *   *  注意事项
 *  模板
 *  图形
 *   *  Path2D 对象
     *  样式
     *   *  色彩
         *  线型
         *  渐变
         *  图案
 *  结语

# 前言 #

*  canvas是一个html5标签，用来做为绘图的画布。
 *  一般情况canvas还是通过js来实现相关效果，
 *  它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。（ECharct）
 *  本篇只讲关于2D图形相关的canvas,而同样使用`<canvas>`元素的WebGL之后有机会再讲。

话不多说，直接进入主题

# canvas创建 #

*  先创建一个canvas标签

之后的操作基本都是在js中进行，然后与html和css进行混合，完成我们需要的成品。

## js中的canvas ##

首先是创建一个参数指定到相关标签

const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

之后是一些基本的参数  
以矩形为例

ctx.fillRect( x, y, width, length)

### 注意事项 ###

*  canvas本身只能使用两个CSS属性 ：width和height，其它的都是无效的,width和height的初始值分别是300和150
 *  如果在canvas绘制多张图，后面的图会默认在上面

# 模板 #

function draw(){
            var canvas = document.getElementById('your canvas id');
            if (canvas.getContext){
              var ctx = canvas.getContext('2d');
            }
          }

`将这个模板放在js代码中即可`

# 图形 #

1.  **矩形**
    
     *  **fillRect(x, y, width, height)**  
        创建一个填充矩形，里面有4个参数，分别代表左上角的X坐标，左上角的Y坐标，矩形的宽度和矩形的长度。
     *  **strokeRect(x, y, width, height)**  
        创建一个矩形边框，和fillRect写法是一样的
     *  **clearRect(x, y, width, height)**  
        清除指定矩形区域，让清除部分完全透明。
    
    代码
    
        ctx.fillRect(x, y, width, height)
         ctx.strokeRect(x, y, width, height)
         ctx.clearRect(x, y, width, height)
2.  **路径， 线**
    
     *  **beginPath()**  
        新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
     *  **moveTo(25, 25)**  
        起始位置，一个条线只需要有一次，其它都用lineTo就好
     *  **lineTo(x, y)**  
        从当前位置到对应位置的线
     *  **arc(x, y, radius, startAngle, endAngle, anticlockwise)**  
        圆弧 :  
        `x,y`代表圆心坐标；  
        `radius`代表半径;  
        `startAngle, endAngle`代表起始点弧度，0在圆心左方；  
        `anticlockwise`是一个布尔值，默认false表示顺时针。
     *  arcTo(x1, y1, x2, y2, radius)（用法不多，没有arc好用）  
        根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
     *  **closePath()**  
        闭合路径之后图形绘制命令又重新指向到上下文中。
     *  **stroke()**  
        和beginPath()配合，闭合图形形成轮廓
     *  **fill()**  
        和beginPath()配合，闭合图形形成实心图形
3.  **贝塞尔曲线**  
    贝塞尔曲线主要是用来绘制复杂且有规律的图形，配合beginPath()等一系列参数操作，类似于lineTo()
    
     *  **二次贝塞尔曲线**  
        `quadraticCurveTo(cp1x, cp1y, x, y)`  
        绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
     *  **三次贝塞尔曲线**  
        `bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`  
        绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

这 是 一 张 M D N 描 述 贝 塞 尔 曲 线 的 图 这是一张MDN描述贝塞尔曲线的图 这是一张MDN描述贝塞尔曲线的图  
![在这里插入图片描述][format_png_pic_right_pic_center_29_pic_center]

## Path2D 对象 ##

如果我们想让某一个路径成为一个变量保存起来，我们可以用到Path2D对象

new Path2D();     // 空的Path对象
    new Path2D(path); // 克隆Path对象
    new Path2D(d);    // 从SVG建立Path对象

*  Path2D.addPath(path \[, transform\])  
    从多个元素中创建对象

## 样式 ##

### 色彩 ###

1.  **fillStyle**  
    设置图形填充颜色

ctx.fillStyle = "rgb(0,0,0)"; //可以用#fff， rgb, rgba或者英文单词 等形式

1.  **strokeStyle**  
    设置图形轮廓颜色，用法同上
2.  **globalAlpha**  
    透明度，数值范围是0-1，0是透明。

### 线型 ###

1.  **lineWidth**  
    线的宽度
2.  **lineCap()**  
    线段端点位置显示的样子，一共有3个值：butt(默认)，square(多出了一半线宽的高度)，round(半圆，半径为一半线宽)
3.  **lineJoin()**  
    两个线段链接处所显示的样子，也是3个值：round(边角磨圆), bevel (边角扁平)和 miter(默认，边角交于一个点)
4.  **setLineDash() 和 lineDashOffset**  
    虚线：  
    setLineDash接受一个数组，用来指定线段与间隙（\[线长度,间隔距离\]）  
    lineDashOffset设置其实偏移量（为单个值）

### 渐变 ###

1.  **createLinearGradient(x1, y1, x2, y2)**  
    `x1,y1` ：渐变的起点  
    `x2,y2` ：渐变的终点
2.  **createRadialGradient(x1, y1, r1, x2, y2, r2)**  
    `x1, y1,r1`：起点圆心的坐标和半径  
    `x1, y1,r1`：终点圆心的坐标和半径
3.  **gradient.addColorStop(position, color)**  
    设置颜色：  
    `position`：范围0-1，1是终点。设置颜色

示 例 代 码 示例代码 示例代码

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
    
      // 创建渐变
      var lingrad = ctx.createLinearGradient(0,0,150,150);
      lingrad.addColorStop(0, '#222');
      lingrad.addColorStop(0.2, '#fff');
      lingrad.addColorStop(0.5, '#fff');
      lingrad.addColorStop(1, '#222');
    
      var lingrad2 = ctx.createLinearGradient(0,50,0,95);
      lingrad2.addColorStop(0.5, '#000');
      lingrad2.addColorStop(1, '#fff');
    
      var radgrad = ctx.createRadialGradient(75,75,10,75,75,25);
      radgrad.addColorStop(0, '#4d4030');
      radgrad.addColorStop(0.5, '#fff');
      radgrad.addColorStop(1, 'rgba(255,255,255,0)');
      //渐变赋值
      ctx.fillStyle = lingrad;
      ctx.strokeStyle = lingrad2;
     
      // 画图形
      ctx.fillRect(10,10,130,130);
      ctx.strokeRect(50,50,50,50);
    
    
      // 画圆
      ctx.fillStyle = radgrad;
      ctx.fillRect(50,50,50,50);
    }

### 图案 ###

**createPattern(image, type)**  
图案的样式非常简单，第一个参数是图片地址，第二个是图片摆放方式  
`type` 有4个参数：repeat，repeat-x，repeat-y 和 no-repeat。  
和字面意思一样，为平铺的方式。

# 结语 #

canvas基本的绘图方式先总结到这里，后面还有一些动画和文字表达的方式，我会放在下一章节总结，也希望小伙伴们在评论区留下宝贵的意见，我看见了也会及时修改和回复。canvas是前端学习上的一个分支，Echarts等数据化视图工具会着重用到，所以还是有学习的必要的，语法想对来说不算太难，只是用法上面还需多多练习。我在学习canvas的过程中，发现canvas始终离不开js的语法，而且绘图相对来说更加简便，只不过如果要做一些复杂的动画和交互，则需要与html，css，js相结合。  
canvas基础介绍就先到这里啦，后面应该还会有一章介绍。让我们有机会再写吧。

[format_png_pic_right_pic_center_29_pic_center]: /images/20221123/647c907eabfc4dc7be143c08dfbd25f5.png