canvas画图源码解析

最新推荐文章于 2023-02-06 15:12:04 发布

macycle

最新推荐文章于 2023-02-06 15:12:04 发布

阅读量714

点赞数

分类专栏：源码文章标签： javascript canvas

本文链接：https://blog.youkuaiyun.com/weixin_43238567/article/details/107099867

版权

源码专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了HTML5中的canvas元素如何在减少DOM操作的情况下提高绘图效率。对比了普通绘图方法和使用canvas绘图的区别，强调了canvas在避免频繁插入DOM节点以提升性能方面的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5中添加了canvas可以在尽量少操作dom的情况下进行绘图，这样子降低了操作dom的次数，提高了绘图的效率。

普通情况下绘图

---html---
<body>
  <div id="canvas"></div>
</body>

---css---
#canvas{
  width:100vw;
  height:100vh;
  border:1px solid black;
}

---javascript---

canvas.onmousemove=(e)=>{
  console.log(e.clientX);
  console.log(e.clientY);
  let div=document.createElement('div');
  div.style.position="absolute";
 
  div.style.left=e.clientX+'px';
  div.style.top=e.clientY+'px';
  div.style.width='6px';
  div.style.height='6px';
  div.style.marginLeft='-3px';
  div.style.marginTop='-3px';
  div.style.background="black"
  canvas.appendChild(div);  //将div加入canvas中，上面的操作只是在内存中绘制出一个矩形而已。
}

用该方法绘制图形，可以看出输出的结果，鼠标每一栋一次，就需要往DOM树插入一个节点，这样降低了渲染的效率。

使用canvas进行绘图


---html---
<body>
<canvas  id='canvas' width='100' height='100'></canvas>
</body>

注：canvas跟image很相似，他可以通过width和height指定canvas的宽高，但是如果通过css重新指定宽高，
    那么在canvas指定的宽高将会被覆盖，实质就是在css设置的宽高，就是将canvas整个元素拉伸，这样子
    会导致canvas绘制出来的图形变形；


---css---
#canvas{
  border:1px solid black;
  display:block;   /*默认下，canvas是inline元素*/
}

注：由于在css中设置宽高，将会把canvas拉伸，使得图形模糊，所以不要在css中设置canvas的宽高；


---javascript---
var canvas=document.getElementById('canvas');
canvas.width=document.documentElement.cliemtWidth;   //注意不是canvas.style.width;
canvas.height=document.documentElement.cliemtHeight;

var ctx=canvas.getContext('2d');
ctx.fillStyle='blue';
canvas.onmousemove=(e)=>{
console.log(e.clientX);
console.log(e.clientY);
ctx.fillRect(e.clientX,eclientX,10,10)

通过canvas元素，可以看出无论鼠标移动多少次，dom树只有canvas这一个节点，这样子减少了绘图时系统性能的消耗；