canvas的初识

canvas的初识

canvas 对象和概念用途

• 概念：HTML5提出的使用 canvas元素结合JavaScript技术来绘制各种图形的技术。
• 用途：1绘制图形、图标。2制作动画效果 。3游戏开发。
• 兼容ie 低版本浏览器 explorercanvas canvas有ie 兼容问题
• canvas 和 svg 的区别
  • canvas 是使用js 动态生成 svg 是使用xml静态描述的
  • canvas 是基于 位图 的适合用于像素处理和动态渲染 svg适合 基于 矢量 的 不适合用于像素处理和动态渲染

• canvas修改会引起重绘 svg 不会

• 使用
  • 创建canvas对象
  • 获取上文环境对象 context
  • 进行操作
• canvas 对象相关属性
  • width 、height
    • 默认大小是300
    • 尽量通过属性设置宽、高 不要用css
• canvas对象的上下文 相关方法
  • getContext() 上下文 (相关操作的封装)
  • toDataURL() 全局属性
  • globalAlpha 定义canvas 环境的透明度
  • globalComponsiteOperation 改变图形的层级顺序
• 坐标系
  • 2D 坐标 x轴于数学坐标系一致 y轴与数学坐标系相反

开启canvas之路从第一个dome开始

Canvas 是HTML5提出的使用 canvas标签结合JavaScript技术来绘制各种图形的技术。我们现在html里创建一个canvas标签 代码如下：

<canvas id="basis" width="890px"  height="200px"></canvas>

let basis = document.getElementById('basis');  // 获取标签
let cxt = basis.getContext('2d');      // 获取上下文;
cxt.moveTo(50,100);
cxt.lineTo(100,50);
cxt.lineTo(150,100)
cxt.lineTo(50,100)
// 
cxt.stroke();
cxt.moveTo(160,10)
cxt.lineTo(200,10)
cxt.lineTo(200,100)
cxt.lineTo(160,100)
cxt.lineTo(160,10)
cxt.fillStyle = '#911115'
cxt.fill()
cxt.stroke();

在👆上面的代码中我们先是在html中新建一个canvas标签 然后在js中获取到该标签。接着通过getContext方法获取到它的context(上下文)对象。然后通过moveTo() 方法在坐标50,100的位置开启一个点 在通过lineTo方法把这个点延伸到坐标100,50的位置，形成一条线。反复几次。整个过程可以想象为在一张纸上进行绘制的过程。stroke()方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。fillStyle 属性设置填充颜色 fill()方法为图形进行填充。

在这里获取到的是2D对象 context对象。 context对象是分2D和3D的，相关3D context可以在MDN上查阅。