HTML5 canvas的相关问题

最新推荐文章于 2023-12-25 16:40:09 发布

双木荼

最新推荐文章于 2023-12-25 16:40:09 发布

阅读量368

点赞数

分类专栏： html JavaScript

本文链接：https://blog.csdn.net/crazy_littlepig/article/details/51733344

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

关于drawImage()图像变形的问题

需要设置画布大小，canvas中的实际像素跟外边的不一样，要这样设置，不能是通过设置样式而是要这样

<div class="all_bg">
   <div id="allcanvas">
<canvas id="canvas1" width="800px" height="600px"></canvas>
<canvas id="canvas2" width="800px" height="600px"></canvas>
   </div>
</div>

这里写图片描述
否则默认是 300－150
样式里面的宽高代表渲染大小

<div class="all_bg">
   <div id="allcanvas">
<canvas id="canvas1" style="width: 800px; height:600px"></canvas>
<canvas id="canvas2" style="width: 800px; height:600px"></canvas>
  </div>
</div>

实际宽高和样式宽高不一致就会拉伸了
这里写图片描述

关于局部透明度的问题

aneObject.prototype.draw = function()
{
  ctx2.save();
  ctx2.lineWidth = '20';
  ctx2.lineCap = "round";
  ctx2.strokeStyle = "#3b154e";
  ctx2.globalAlpha = 0.6;
  for(var i=0;i<this.num;i++){
  ctx2.beginPath(); 
  ctx2.moveTo(this.x[i],can_height);
  ctx2.lineTo(this.x[i],can_height-this.len[i]);
  ctx2.stroke();
}
  ctx2.restore();
}

globalAlpha是一个全局的，但是只要他出现在restore()与save()之间,它便只作用于这两个之间