| 标题 | html5 canvas fillRect坐标和大小的问题解决方法 |
| 内容 | 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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。