初识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 |