html5 canvas fillRect坐标和大小的问题解决方法_html5教程技巧

fillRect(100,100,100,100) 前2个100是指坐标,后2个100是指宽和高。

今天学习html5canvas,发现fillRect的坐标和大小一直不对,研究了半天,发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。

错误的方式1:

复制代码代码如下:

Document

#mycanvas{
width: 200px;
height: 200px;
background: yellow;
}

var c = document.getElementById(‘mycanvas’);
var ctx = c.getContext(“2d”);
ctx.fillStyle=’#f36′;
ctx.fillRect(100, 100, 100, 100);

错误的方式2:

复制代码代码如下:

Document

var c = document.getElementById(‘mycanvas’);
var ctx = c.getContext(“2d”);
ctx.fillStyle=’#f36′;
ctx.fillRect(100, 100, 100, 100);

显示结果:

正确的方式:

复制代码代码如下:

Document

var c = document.getElementById(‘mycanvas’);
var ctx = c.getContext(“2d”);
ctx.fillStyle=’#f36′;
ctx.fillRect(100, 100, 100, 100);

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2912900.html

(0)
上一篇 2025年3月11日 08:51:52
下一篇 2025年2月25日 15:43:03

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论