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

前言

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

话不多说，直接进入主题

canvas创建

• 先创建一个canvas标签

<canvas id="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为结束点。

$$这是一张MDN描述贝塞尔曲线的图$$

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或者英文单词 等形式

2. strokeStyle
   设置图形轮廓颜色，用法同上

3. 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基础介绍就先到这里啦，后面应该还会有一章介绍。让我们有机会再写吧。