请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

使用canvas绘制矩形

2013-10-1 11:52| 发布者: admin| 查看: 1254| 评论: 0

摘要: 作为开始,来一个简单的吧——绘制两个交错的矩形,其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。

有三个函数用于绘制矩形的:  

fillRect(x,y,width,height) : Draws a filled rectangle 

strokeRect(x,y,width,height) : Draws a rectangular outline 

clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

 x 和 y 指定矩形左上角(相对于原点)的位置,width 和 height 是矩形的宽和高。

 

示例1

说明

低版本的IE不能有效的支持HTML5,需要引入excanvas.js来让IE支持canvas

作为开始,来一个简单的吧——绘制两个交错的矩形,其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。

 

代码

<html>

  <head>

  <script type="text/javascript" src="excanvas.js">script>   

  <script type="text/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>

  head>

  <body onload="draw();"> 

      <canvas id="canvas" width="150" height="150">

      </canvas>

  body>

html>

 

效果

示例2


说明

fillRect 函数画了一个大的黑色矩形(100x100),clearRect 函数清空了中间 60x60 大小的方块,然后strokeRect 函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。在接下去的页面里,我们会看到和 clearRect 函数差不多另外两个方法,以及如何去改变图形的填充和边框颜色

 

代码

<html>

  <head>

  <script type="text/javascript" src="excanvas.js">script>   

  <script type="text/javascript">

    function draw() {

      var canvas = document.getElementById("canvas"); 

      if (canvas.getContext) { 

           var ctx = canvas.getContext("2d");

           //ctx.fillStyle = '#FD0'; //填充色

           //ctx.strokeStyle = '#FD0'; //边框颜色

           ctx.fillRect(25,25,100,100);

           ctx.clearRect(45,45,60,60);

           ctx.strokeRect(50,50,50,50);

       }  

    }   

  script>

  head>

  <body onload="draw();" > 

      <canvas id="canvas" width="150" height="150">

      </canvas>

  body>

html>

效果



鲜花

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2019-12-11 11:22 , Processed in 0.092396 second(s), 31 queries .

返回顶部