1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Learning the basics of canvas</title>
6 <style type="text/css">
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 /*canvas的颜色默认和父集背景颜色一样,所以应该设置颜色,避免写明JS调用无法看到canvas的情况*/
12 #canvas{
13 background-color: #00FFFF;
14 margin:10px;
15 padding: 10px;
16 border: 10px #FFE4C4 solid;
17 }
18 </style>
19
20 </head>
21 <body>
22 <!--canvas中间的内容不会输出，只有浏览器不支持的时候，会输出里面的文字-->
23 <canvas id="canvas" width="400" height="300">Canvas not supported</canvas>
24 <script type="text/javascript">
25 //定义canvas这个变量，并且设置2d环境
26 var canvas = document.getElementById(‘canvas‘);
27 context = canvas.getContext(‘2d‘);
28 //canvas 默认颜色是黑色，所以会有一个黑色矩形
29 //格式为context.fillRect(x,y,width,height)
30 context.fillRect(40,40,100,100);
31 //注意有一个问题，你绘制的图形原点在canvas之外，可能无法正常显示
32 </script>
33 </body>
34 </html>
看到的效果
时间： 2024-11-09 07:56:38