新鲜出炉的canvas~

Posted 2021-05-23 她还会来吗

canvas概述

canvas元素用于图形的绘制，通过脚本 (通常是javascript)来完成.canvas标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas绘制路径,盒、圆、字符以及添加图像。

canvas的基本使用

MDN文档
canvas只有两个标签属性,width和height;如果不写这两个属性的话,默认宽高为300px*150px

<canvas>当前浏览器版本不支持,请升级浏览器</canvas>

注意:canvas的宽高不要用css样式设置,如果使用css样式设置,画布会失真,会变形

兼容替换

由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者浏览器不支持html元素canvas在这些浏览器上你应该总是能展示替代内容。支持canvas的浏览器会只渲染canvas标签，而忽略其中的替代内容。不支持 canvas 的浏览器则 会直接渲染替代内容。

绘制图形

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

绘制矩形

• fillRect:表示在页面中绘制矩形,共有四个属性,前两个分别表示x和y的坐标,后两个则表示宽度和高度。
  

• fillStyle：设置矩形的背景色

    var canvas = document.querySelector('canvas');
    // 得到画布上下文,上下文有两个,2d的上下文和3d的上下文
     var ctx = canvas.getContext("2d");
    //  设置颜色
    ctx.fillStyle = 'pink';
    //  设置矩形前,应该先设置颜色
    ctx.fillRect(100,100,200,50);
    console.log(ctx);

绘制矩形边框

• strokeStyle:设置矩形边框颜色
• strokeRect表示在页面中绘制矩形边框,共有四个属性,前两个分别表示x和y的坐标,后两个则表示宽度和高度。

    var canvas = document.querySelector('canvas');
    // 得到画布上下文,上下文有两个,2d的上下文和3d的上下文
     var ctx = canvas.getContext("2d");
     //  设置颜色
     ctx.strokeStyle = 'green';
     //  设置矩形边框
     ctx.strokeRect(100,100,50,50);
     console.log(ctx);

绘制路径

绘制路径作用是为了设置一个不规则的多边形状态,路径是闭合的,使用了警进行绘制的时候需要既定的步骤。

1. 设置路径的起点
2. 使用绘制命令画出路径
3. 封闭路径
4. 填充或者绘制已经封闭路径的形状

    var canvas = document.querySelector('canvas');
    // 得到画布上下文,上下文有两个,2d的上下文和3d的上下文
    var ctx = canvas.getContext("2d");
    // 创建路径
    ctx.beginPath()
    // 移动绘制点
    ctx.moveTo(100,100)
    // 描述行进路径
    ctx.lineTo(300,100)
    ctx.lineTo(130,200)
    ctx.lineTo(200,50)
    ctx.lineTo(270,200)
    ctx.lineTo(100,100)
    // 封闭路径
    ctx.closePath();
    // 绘制图形
    ctx.strokeStyle = 'red';
    ctx.stroke(); 
    // 填充
    ctx.fillStyle='red'
    ctx.fill()
    console.log(ctx);

stroke()通过线条来绘制图形轮廓。
fill()通过填充路径的内容区域生成实心的图形
我们在绘制路径的事后可以选择不关闭路径,这个时候会实现自封闭现象(只有fii())

绘制圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

这里详细介绍一下arc方法，该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

    var canvas = document.querySelector('canvas');
    // 得到画布上下文,上下文有两个,2d的上下文和3d的上下文
    var ctx = canvas.getContext("2d");
    // 绘制圆形
    ctx.arc(200,200,50,0,2*3.14)
    // 填充圆形边框
    ctx.stroke()
    console.log(ctx);

canvas的像素化

1. 我们使用canvas绘制了一些图形,一旦绘制成功,canvas就像素化了他们.canvas没有能力,从画布上再次得到这个图形,也就是说我们没有能力去修改已经在画布上的内容,这个就是canvas比较轻量的原因.

2. 如果我们想要让这个canvas图形移动,必须按照清屏-更新-渲染的逻辑进行编程,总之就是再画一次。

• clearRect:清除画布,有四个属性,前两个表示从什么位置开始消除,后两个则表示清除的宽度和高度.

  ctx.clearRect(100,100,600,600)

线型

line-styles
可以通过一系列属性来设置线的样式。

• lineWidth = value：设置线条宽度
• lineCap = type：设置线条末端样式

	     ctx.lineCap = "butt"; // 线段末端以方形结束。
	     ctx.lineCap = "round"; // 线段末端以圆形结束。
	     ctx.lineCap = "square"; //  线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

• lineJoin = type：设置线条与线条间接合处的样式。

		ctx.lineJoin = "bevel";// 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
		ctx.lineJoin = "round";// 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
		ctx.lineJoin = "miter";// 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。

• setLineDash(segments)：设置当前虚线样式,内部接受一个数组(数组内部是虚线的交替状态)

		ctx.setLineDash([10,20]);

·数组内部可以是为一组的状态,最少接收两个参数,也可以传多个,比如·

ctx.setLineDash([10,20,30,40,50]);

提示：如果要切换回至实线模式，将segments设置为一个空数组即可。

  var canvas =  document.querySelector('canvas');
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(100,100);
  ctx.lineTo(200,200);
  ctx.lineTo(300,100);
  // 设置线的宽度
  ctx.lineWidth = 10;
  //  设置线条末端样式
  ctx.lineCap = "round";
  ctx.stroke();

文本

• fillText(text, x, y [, maxWidth]):在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
  填充文本

			ctx.fillText(text, x, y, [maxWidth]);
            text：使用当前的 font, textAlign, textBaseline 和 direction 值对文本进行渲染。
            x:文本起点的 x 轴坐标。
            y:文本起点的 y 轴坐标。
            maxWidth(可选): 绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。

  ctx.font = "30px 宋体"
  ctx.fillText("你好,我是宋体",100,100)

• textAlign = value:文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
  文本对齐选项

ctx.textAlign = "left" || "right" || "center" || "start" || "end";
left
文本左对齐。
right
文本右对齐。
center
文本居中对齐。
start
文本对齐界线开始的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。
end
文本对齐界线结束的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。

渐变

线性渐变

线性渐变

• ctx.createLinearGradient(x0, y0, x1, y1):方法创建一个沿参数坐标指定的直线的渐变。

x0:起点的 x 轴坐标。
y0:起点的 y 轴坐标。
x1:终点的 x 轴坐标。
y1:终点的 y 轴坐标。

• addColorStop:内部接收两个参数,第一个参数是当前渐变的位置(0~1),第二个参数是颜色

  var linear = ctx.createLinearGradient(0,0,200,200);
  linear.addColorStop(0,"red");
  linear.addColorStop(0.3,"blue");
  linear.addColorStop(0.5,"yellow");
  linear.addColorStop(1,"purple");
  ctx.fillStyle = linear;
  ctx.fillRect(10,10,200,100);

径向渐变

径向渐变

• ctx.createRadialGradient(x0, y0, r0, x1, y1, r1):根据参数确定两个圆的坐标，绘制放射性渐变的方法

x0:开始圆形的 x 轴坐标。
y0:开始圆形的 y 轴坐标。
r0:开始圆形的半径。
x1:结束圆形的 x 轴坐标。
y1:结束圆形的 y 轴坐标。
r1:结束圆形的半径。

var linear = ctx.createRadialGradient(50,100,10,50,100,50);
linear.addColorStop(0,"red");
linear.addColorStop(0.5,"yellow");
linear.addColorStop(1,"purple");
ctx.fillStyle = linear;
ctx.fillRect(0,0,400,300);

  会发光的,一个就够了
                             --- 亡 者 农 药

使用图片

使用图片
canvas中使用drawImage来绘制图片,主要是把外部的图片导入进来绘制到画布上。

• drawImage(image, x, y):如果我们设置的参数一共是两个(不包含第一个image参数),表示的是图片的加载位置
• drawImage(image, x, y, width, height):如果有四个参数不包含第一个image参数),则分别表示位置和宽高
• drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight):如果有八个参数(不包含第一个image参数),前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。
  

  var canvas =  document.querySelector('canvas');
  var ctx = canvas.getContext("2d");
  // 创建一个image元素   
  var image = new Image();
  // 用src设置图片的地址
  image.src = "./image/1.jpeg";
  // 必须要在onload之后在进行绘制图片,否则不会渲染
  image.onload = function(){
    ctx.drawImage(image,300,200,200,100);
  }