Blog

html5学习心得(三)之canvas用法

今天即将启程回家过年,但心情甚好,写下本周学习心得之HTML5 canvas ,大家也许都知道HTML5规范引进了很多新特性,其中最令人期待的之一就是canvas元素。HTML5 canvas提供了通过JavaScript绘制图形的方法,此方法使用简单但功能强大。每一个canvas元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个canvas上下文,并通过不同的API提供图形绘制功能。 使用canvas并不难,只要你具有HTML和 JavaScript的基础知识,并使用新版本浏览器(IE9、Opera 9、Firefox 1.5、Konqueror和最近版本的Safari)即可看到效果。好了,不多说了,眼见为实咯,下面通过几个准备工作开始我们今天的学习,最终看能不能得到相应的效果。 1.HTML5文档格式 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="canvas,canvas用法,canvas实例"> <meta name="description" content="学习canvas用法"> <title>canvas</title> </head> <body> </body> </html> 2.canvas元素的定义 <canvas id="canvas" width="300" height="300"></canvas> 因为 <canvas> 相对较新,有些浏览器并没实现,如Firefox 1.0 和 Internet Explorer,所以我们需要为那些不支持canvas的浏览器提供替用显示内容。我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容,而支持的浏览器则会正常地渲染canvas。例如,我们可以把一些文字或图片填入canvas内,作为替用内容: <canvas id="canvas" width="300" height="300"> <img src="images/no-support-browser.png" width="300" height="300" alt="你的浏览器不支持canvas属性,你OUT啦,赶紧下载最新版本体检canvas的神奇吧!"/> </canvas> 3.通过javascript来控制和显示canvas的效果 <script type="application/x-javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } </script> 4.查看最终效果 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="canvas,canvas用法,canvas实例"> <meta name="description" content="学习canvas用法"> <title>canvas</title> <script type="application/x-javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(100,100,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 100, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } </script> <style type="text/css"> canvas { background:#ccc;border: 1px solid #000; }  //默认情况下canvas为150X150的透明层 </style> </head> <body onload="draw();"> <canvas id="canvas" width="300" height="300"> <img src="images/no-support-browser.png" width="300" height="300" alt="你的浏览器不支持canvas属性,你OUT啦,赶紧下载最新版本体检canvas的神奇吧!"/> </canvas> </body> </html> 将以上的代码复制下来运行看看,能不能得到想要的效果。

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP