初识canvas元素
HTML5新增了一个元素canvas，用于绘图使用，其实它的表现和div比较接近（其实他应该属于inline-block），而提供了许多接口，从而轻易的绘制矩形框、园三角形等
PS：关于HTML5新增元素
经过最近两天的学习，和以前对HTML5的认知，我认为HTML5其实还是HTML4，两者之间没多大的区别，无非是增加了点新东西。<br>我认为HTML5为我们带来的真正意义是：我们可以用javascript做更多的事情了；我们可以用javascript实现更好的产品了。
比如HTML5就解决了我们头疼的跨域问题、实时通信API、与现在的canvas
之所以HTML5叫HTML5，我认为他是划时代的，比如他让我们用网页开发游戏变成可能；比如他让电脑桌面只剩IE不在是传说（过于夸张）绘制矩形框
直入正题，我们来绘制一个矩形框看看,这里提供一个颜色选择器用于方便的选择颜色，PS：现在不用jquery编程感觉真麻烦。。。
问题：定义样式与定义height与width
一来就遇到了问题，我这里先来截个图：
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <script type="text/javascript">
- function draw() {
- //获取canvas对象
- var canvas = document.getElementById('canvas');
- if (canvas == null) {
- return false;
- }
- var context = canvas.getContext('2d');
- context.fillStyle = '#99d9ea';
- context.fillRect(0, 0, 300, 200); //填充画布结束
- context.strokeStyle = 'red';
- context.fillStyle = 'gray';
- context.lineWidth = 1;
- context.fillRect(10, 10, 100, 100);
- context.strokeRect(10, 10, 100, 100);
- context.clearRect(20, 20, 20, 20);
- }
- </script>
- </head>
- <body>
- <canvas id="canvas" width=300 height="200" style="border: 1px solid black; width: 300px; height: 200px;">
- </canvas>
- <br />
- <button onclick="draw();">
- 绘制矩形</button>
- <input type="color" />
- </body>
- </html>
各位情况canvas元素，图一位设置width与height的情况，图二十用style指定的情况：
本文地址 ： http://www.fengfly.com/plus/view-212667-1.html
| 标签: HTML5 canvas |