time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > HTML5初探绘制图像(上)canvas元素的使用

HTML5初探绘制图像(上)canvas元素的使用

时间:2013-05-01 23:23 点击:2894次 字体:[ ]




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

一来就遇到了问题,我这里先来截个图:

  1.  
  2. <!DOCTYPE html> 
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml"> 
  5.  
  6. <head> 
  7.  
  8.     <title></title> 
  9.  
  10.     <script type="text/javascript"> 
  11.  
  12.         function draw() {  
  13.  
  14.             //获取canvas对象  
  15.  
  16.             var canvas =  document.getElementById('canvas');  
  17.  
  18.             if (canvas == null) {  
  19.  
  20.                 return false;  
  21.  
  22.             }  
  23.  
  24.             var context = canvas.getContext('2d');  
  25.  
  26.             context.fillStyle = '#99d9ea';  
  27.  
  28.             context.fillRect(0, 0, 300, 200); //填充画布结束  
  29.  
  30.    
  31.  
  32.             context.strokeStyle = 'red';  
  33.  
  34.             context.fillStyle = 'gray';  
  35.  
  36.             context.lineWidth = 1;  
  37.  
  38.             context.fillRect(10, 10, 100, 100);  
  39.  
  40.             context.strokeRect(10, 10, 100, 100);  
  41.  
  42.    
  43.  
  44.             context.clearRect(20, 20, 20, 20);  
  45.  
  46.         }  
  47.  
  48.     </script> 
  49.  
  50. </head> 
  51.  
  52. <body> 
  53.  
  54.     <canvas id="canvas" width=300 height="200" style="border: 1px solid black; width: 300px; height: 200px;"> 
  55.  
  56.     </canvas> 
  57.  
  58.     <br /> 
  59.  
  60.     <button onclick="draw();"> 
  61.  
  62.         绘制矩形</button> 
  63.  
  64.     <input type="color" /> 
  65.  
  66. </body> 
  67.  
  68. </html> 

 各位情况canvas元素,图一位设置width与height的情况,图二十用style指定的情况:

HTML5初探绘制图像(上)canvas元素的使用_www.fengfly.com



本文地址 : http://www.fengfly.com/plus/view-212667-1.html
标签: HTML5 canvas
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: