html5 canvas fillRect坐标和大小的问题解决方法

  发布时间:2014-03-26 17:03:30   作者:佚名   我要评论
今天学习html5 的canvas,发现fillRect的坐标和大小一直不对,研究了半天,发现canvas的宽度和高度必须内联在canvas标签中才对
fillRect(100,100,100,100) 前2个100是指坐标,后2个100是指宽和高。

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

错误的方式1:

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mycanvas{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<canvas id='mycanvas' ></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>

错误的方式2:

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id='mycanvas' style='width:200px;height:200px;background:yellow'></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>

显示结果:

正确的方式:

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id='mycanvas' width='200px' height='200px' style='background:yellow'></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>

相关文章

  • 前端监听websocket消息并实时弹出(实例代码)

    这篇文章主要介绍了前端监听websocket消息并实时弹出,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-23
  • HTML5 新增内容和 API详解

    这篇文章主要介绍了HTML5 新增内容和 API详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-17
  • Html5同时支持多端sdk的小技巧

    在实际项目中,我们通常会需要做一些跨多平台的页面。本文主要介绍了Html5同时支持多端sdk的小技巧,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴
    2021-11-15
  • 使用canvas仿Echarts实现金字塔图的实例代码

    本文主要介绍了使用canvas仿Echarts实现金字塔图的实例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-09
  • 基于HTML十秒做出淘宝页面

    十分钟做出一个网页,看似不可思议,下面小编给大家带来了基于HTML十秒做出淘宝页面,只分为两步,代码超级简单,需要的朋友参考下吧
    2021-10-18
  • HTML5+CSS+JavaScript实现捉虫小游戏设计和实现

    这篇文章主要介绍了HTML5+CSS+JavaScript实现捉虫小游戏设计和实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参
    2021-10-12
  • Canvas绘制像素风图片的示例代码

    像素风的游戏是80,90后的童年,像素风本身就是由极度简单的元素构成极度复杂的画面,本文介绍了Canvas绘制像素风图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-22
  • Canvas如何做个雪花屏版404的实现

    本文主要介绍了Canvas如何做个雪花屏版404的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-17
  • 使用canvas对video视频某一刻截图功能

    我本次的需求是多人视频中对某一视频某一刻的截图,展示视频直接用的原生video标签,今天通过使用canvas对video视频某一刻截图功能,感兴趣的朋友跟随小编一起看看吧
    2021-09-16
  • html5笛卡尔心形曲线的实现

    本文主要介绍了html5笛卡尔心形曲线的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-06

最新评论