canvas

canvas

在渲染复杂的动效，把数据可视化图形显示，游戏场景等需求，都会用canvas技术，比dom操作性能更高

特点：

1.h5的新增图形标签，通过提供的javaScript函数绘制各种图表或利用算法是吸纳非常华丽的动效

2，在以前是用flash实现，但不能和js交互

3,适合动态图形绘制

缺点

是位图，缩放会模糊。

svg意为可缩放矢量图形（Scalable Vector Graphics）。

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

• SVG 用来定义用于网络的基于矢量的图形

• SVG 使用 XML 格式定义图形

• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

• SVG 是万维网联盟的标准

• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

canvas:

默认的画布是300*150;

<canvas width="500" height="500">canvas>
<script>
    const oC=document.getElementsByTagName("canvas")[0];
    let ctx=oC.getContext("2d");//规定在2d的环境下；
    //绘制矩形
    // ctx.rect(100,100,200,200);
    //前面两个值指的是二维坐标，后面两个值指的是宽度和高度；
    // ctx.stroke();
    // ctx.fill();
    // ctx.fillRect(100,100,200,200);复合写法，相当于ctx.fill();和ctx.rect(100,100,200,200);的复合写法;
    ctx.strokeRect(100,100,200,200);//同上原理。
    ctx.clearRect(100,100,50,50);

script>

• 绘制矩形：

  • rect(x,y,w,h) 绘制矩形，前两个数值是二维坐标，后两个是宽度和高度。

  • fillRect(x,y,w,h)绘制填充实心矩形；

  • strokeRect(x,y,w,h)绘制空心矩形；

  • clearRect(x,y,w,h)清除矩形选区； 清除矩形，前两个数值是二维坐标，后两个是宽度和高度。

• 绘制方式

  • stroke（） 以边框线的方式绘制图形，默认填充黑色。

  • fill( ) 以填充的方式绘制图形，默认填充黑色。

• 绘制样式属性

  • fillStyle 填充颜色

    ctx.fillStyle="rgba(255,255,0,.5)";//要写在画之前才会生效
    ctx.strokeRect(100,100,200,200);//同上原理。
    ctx.clearRect(100,100,50,50);
    

  • strokeStyle 触笔颜色

    ctx.strokeStyle="hsl(255,50%,50%)";
    ctx.strokeRect(100,100,50,50);
    

    • 关于HSL

      HSL是一种将RGB色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构RGB更加直观。

      HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

      色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。

      饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。

      明度（V），亮度（L），取0-100%。

  • lineWidth 触笔粗细（线宽）

     ctx.lineWidth=10;
    

• 绘制线条

  • moveTo(x,y); 从x,y开始绘制；
  • lineTo(x,y);绘制到x,y;

• 注意

  
  
      "500" height="500">
  
  
  

  此时在css内联样式中（style）将宽高度改变为canvas的二倍。此时，ctx.strokeRect(100,100,50,50);的前两个属性会扩大为二倍。及二维坐标是从（200,200）开始的。

• 图形路径

  • beginPath() 开始路径

  • closePath() 结束路径

    "500" height="500">

• 图形边界样式属性

  lineJoin 边界连接点样式

  ​ miter （默认值）

  ​ round(圆角)

  ​ bevel(斜角)

          const oC=document.getElementsByTagName("canvas")[0];
          let ctx=oC.getContext("2d");//规定在2d的环境下；
          ctx.lineWidth=10;
          ctx.lineJoin="round";
          ctx.lineJoin="bevel";
         ctx.beginPath();
         ctx.moveTo(100,50);
         ctx.lineTo(200,50);
         ctx.lineTo(150,150);
         ctx.closePath();
         ctx.stroke()
  

  lineCap 端点样式

  ​ butt(默认值)

  ​ round(圆角)

  ​ square(高度多出线宽一半)

  const oC=document.getElementsByTagName("canvas")[0];
      let ctx=oC.getContext("2d");//规定在2d的环境下；
      ctx.lineWidth=15;
      ctx.strokeStyle="lightgreen";
      ctx.moveTo(200,50);
      ctx.lineTo(200,200);
      ctx.stroke();
  
      ctx.beginPath();
      ctx.lineCap="round";
      ctx.moveTo(300,50);
      ctx.lineTo(300,200);
      ctx.stroke();
  

  ​

• 三角函数

  • 1角度=1*Math.PI/180弧度。

  • 1弧度=1*180/Math.PI 角度

    arc(x,y,r,0,360,false)

    x,y圆心坐标位置

    r圆半径

    0,360从0度到360度所对应的弧度（弧度：角度值*Math.PI/180）

    true/false逆时针/顺时针绘图

独立路径 不影响上下文路径

​ save() 保存路径

​ restore() 恢复路径

小例子：用canvas画出一张图片

​

<canvas width='500' height='500'></canvas>

let oC=document.getElementByTagName('canvas')[0];
let ctx=oC.getContext('2d');
let img=new Image();
img.src='./1.jpg';
img.onload=function(){
    ctx.drawImage(img,100,100,400,200);
}

引入视频

<video src='./f117bb.mp4' width='400' controls></video>
<canvas width='500' height='500'></canvas>

let oC=document.getElementByTagName('canvas')[0];
let ctx=oC.getContext('2d');
let video=document.getElementByTagName('video')[0];

play()
function play(){
    ctx.drawImage(video,0,0,500,500);
    requestAnimationFrame(play);
}

图片平铺

<canvas width='500' height='500'></canvas>

let oC=document.getElementByTagName('canvas')[0];
let ctx=oC.getContext('2d');
let img=new Image();
img.src='./1.jpg';
img.onload=function(){
	let bgi=ctx.creatPattern(img,'no-repeat');
	ctx.fillStyle=bgi;
    ctx.fillRect(0,0,500,500);
}

颜色渐变

线性渐变：createLinearGradient(x1,y1,x2,y2)

​ x1,y1起始坐标点

​ x2,y2结束坐标点

径向渐变:creatRadialGradient(x1,y1,r1,x2,y2,r2)

​ x1,y1,r1内圆坐标及半径

​ x2,y2,r2外圆坐标及半径

addColorStop(位置，颜色)

​ 位置：渐变点 0-1之间 可多个

线性渐变例子：

 	let oC=document.getElementsByTagName('canvas')[0];
    let ctx=oC.getContext('2d');
    let color=ctx.createLinearGradient(0,0,500,500);
    color.addColorStop(.2,'green');
    color.addColorStop(.4,'orange');
    color.addColorStop(1,'pink');
    ctx.fillStyle=color;
    ctx.fillRect(0,0,500,500);

径向渐变例子：

	let oC=document.getElementsByTagName('canvas')[0];
    let ctx=oC.getContext('2d');
    let color=ctx.createRadialGradient(250,250,30,250,250,150);
    color.addColorStop(.2,'yellow');
    color.addColorStop(.4,'orange');
    color.addColorStop(1,'lightblue');
    ctx.fillStyle=color;
    ctx.fillRect(0,0,500,500);

像素操作

createImageData(sx,sy)

​ 创建新的空白的 ImageData对象

···getImageData(x1,y1,w,h)···

​ 返回ImageData对象，该对象为画布上指定的矩形复制像素数据

putImageData(img,x2,y2)

​ 把图像数据（从指定的ImageData对象）放回画布上