html5 canvas画布尺寸与显示尺寸

我在用canvas制作画板时,遇到了绘图位置和鼠标位置不一致的问题,所以今天查阅了一下资料,解决了这个问题。文章地址https://www.yii666.com/article/756220.html文章来源地址:https://www.yii666.com/article/756220.html

canvas绘图原理

在Canvas元素的内部存在一个名为2d渲染环境(2d redering context)的对象,canvas可以看成在页面上的一张图片

使用css对cnavas设置宽高

如果你采用直接设置css样式的方式对canvas设置宽高,就相当于在对一张图形进行放大或缩小,图形就会变形。

当然,你也可以利用这种变形来达到一些效果,比如把圆变成椭圆。

使用js或在标签里直接设置宽高

<canvas id="canvas" width="500" height="400" >

或者网址:yii666.com<网址:yii666.com

canvas.width = 500;
canvas.height = 400;

用这种方法设置宽高,不会导致图形变形,也可以解决我之前遇到的鼠标和绘图起点不一致的问题。文章来源地址https://www.yii666.com/article/756220.html

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png