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>



声明：本站（华域联盟www.cnhackhy.com）所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。