时间:2021-05-18
当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ var canvas=document.getElementById('canvas').getContext('2d'); canvas.fillRect(50,50,50,50); } </script> <style> body{ background: #000; } #canvas{ width: 300px; height: 400px; background:#fff; } </style></head><body> <canvas id="canvas"> <span>不支持canvas标签</span> </canvas></body></html>显示情况如下:
该效果与我们预想的不同,此时有两种修改方案:
(1)在代码js中添加设置宽高属性的代码设置宽度和高度:
canvas.setAttribute("height",canvas.clientHeight);canvas.setAttribute("width",canvas.clientWidth);(2)除去外部css中设置宽高属性的代码,给canvas标签直接添加宽度和高度属性:
<canvas id="canvas" width="300" height="400" > <span>不支持canvas标签</span></canvas>最后显示效果如下:
以上这篇解决canvas画布使用fillRect()时高度出现双倍效果的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
总结以下三种清空canvas画布的方式:1.最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:functionc
清空canvas画布内容1、重置宽或高由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况)v
先来理解canvas的这几个宽度和高度canvas.width是画布的大小,而canvas.style.width是浏览器渲染的canvas的尺寸第一个问题:画
效果图展示:canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错....这里用到了cre
本文介绍怎么解决canvas绘图过程中,drawText的换行问题,先看一个大家平时在canvas绘制文本都会遇到的问题:一个150*100的canvas画布,