首页 > 代码库 > canvas基础教学之实现第一个矩形
canvas基础教学之实现第一个矩形
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>
看到的效果
canvas基础教学之实现第一个矩形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。