写canvas程序的格式规范以及一些注意事项

html5 canvas规范格式如下

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
        }
#mycanvas{
background-color: #dddddd;
width: 600px;
height: 600px;
        }
</style>
</head>
<body>
<canvas id="mycanvas">
        canvas is not support
</canvas>
<script src="hellocanvas.js"></script>
</body>
</html>
js文本hellocanvas.js:

var canvas = document.getElementById("mycanvas");
context = canvas.getContext("2d");

了解事项

1，canvas的高和宽度只能用非负整数表示，不能带px；

2，在 canvas 标签设置的大小和在css样式中设canvas的大小是不一样的。

前者是绘图的内容（表面大小），也就是当你在canvas中添加一hello canvas的字体图像，当你在此标签改变宽和高，其字体大小看起来是没变化的

实例如下；当width,height都为400时

当width,height都为600时:

hello canvas的大小是看不到变化的。。

而后者与之相反，hello canvas的字体会有放大的效果

秒客网

写canvas程序的格式规范以及一些注意事项

相关文章