码迷,mamicode.com
首页 > 其他好文 > 详细

<canvas>标记符

时间:2015-06-24 20:51:35      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

一、HTML5<canvas>标记符的使用

  <canvas>标记符是HTML5中最简单的一个标记符。只需要告诉浏览器画布到底有多大就可以了。然后,浏览器会创建相应的容器,例如:下面的例子显示一  个 250x250像素的<canvas>:

    <canvas width="250" height="250" id="myCanvas"></canvas>

二、示例

技术分享
<!DOCTYPE HTML>
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Canvas</title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
     </head>
    <body>
      <canvas width="250" height="250" id="myCanvas">
        <p>Alternate content goes here</p>
      </canvas>
         <script type="text/javascript">
        $(document).ready(function(){
                var canvas=document.getElementById("myCanvas");
                if(canvas.getContext)
                {
                  var canvasContext=canvas.getContext("2d");
                  canvasContext.fillStyle="blue";
                  canvasContext.fillRect(10,10,50,100);
                } 
                else
                {
                }       
                });
          </script>
        </body>
      </html>
 以上代码创建了<canvas>元素。网页中使用JavaScript代码来画长方形,如下代码:
   var canvas=document.getElementById("myCanvas");
   if(canvas.getContext)
   {
    var canvasContext=canvas.getContext("2d");
    canvasContext.fillStyle="blue";
    canvasContext.fillRect(10,20,50,100);
   }
   else
   {}    
View Code

 

<canvas>标记符

标签:

原文地址:http://www.cnblogs.com/MyBlog-Richard/p/4598385.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!