百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> Html5 Canvas画布以及绘制矩形实例
分享文章到:

Html5 Canvas画布以及绘制矩形实例

发布时间:01/15 来源: 浏览: 关键词:
Canvas 是 Html5 很强大的一个功能,可以用来建立一个画布并且在上边任意的绘制矩形、圆形、渐变、线条和插入图片等,还能制作复杂的动画,将来可以逐步用来减少甚至代替 Flash,甚至还可以利用 3D 引擎制作大型 3D 页游。

Canvas 标签用来建立一个矩形画布区域,利用 Canvas 提供的 JS 方法来绘制图形,可以对画布的每一个像素进行控制,就类似但不局限于 PHP 的 GD 库。

下面我将分多篇文章系统介绍 Canvas 标签的使用方法,虽然 Canvas 标签实际使用的还是非常少,但在 Html5 普及之后必然是一大趋势,我们先下手为强。

结构

Canvas在HTML页面中是一个“<canvas></canvas>”标签,显示为一个矩形区域。矩形区域的左上角为坐标原点(0,0),向右为X轴,向下为Y轴。

检测浏览器支持
 

 代码如下
 
try {
document.createElement(“canvas”).getContext(“2d”);
document.getElementById(“support”).innerHTML =
“HTML5 Canvas is supported in your browser.”;
} catch (e) {
document.getElementById(“support”).innerHTML = “HTML5 Canvas is not supported É
in your browser.”;
}

 
4、失败回退
 对于不支持canvas的浏览器,会显示canvas标签中间的备选文字。注意:还有两点不足的地方,在canvas中绘制的图片不能设置备选文字(text alternatives)。
 
5、浏览器支持
 除了IE其他浏览器都支持,微软承诺在IE9中会支持Canvas


使用方法

Canvas可以画直线,弧线,支持各种线条样式和使用纯色或图片填充,可以绘制文字和阴影等,API和一般语言的2D绘图API类似,就不在重复摘抄了,可以参看Mozilla Developer Center上

创建画布

画图之前我们要先创建一个画布,就类似于 PS 新建一个图层。

 

 代码如下
<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>Html5 - canvas 演示 | 斌果博客</title>
 <script type="text/javascript">
  window.onload = function(){
   //JS 部分,之后用的 JS 代码在这里添加...
  }
 </script>
 <style>
  #bingcanvas{border:2px solid #E5E5E5;background:#FAFAFA;}
 </style>
</head>
<body>
 <canvas id="myCanvas" width="800px" height="400px;">抱歉,您的浏览器不支持此功能,请下载最新版的 Chrome</canvas>
</body>
</html>

上面的就是我们例子的基本结构。body 标签里用 canvas 标签创建了一个画布;id 为 myCanvas;宽高分别为 800px 和 400px;为了让大家看的更清楚我还用 CSS 给画布了一个边框和一个浅灰色的背景颜色。

运行上边的代码得到如下的网页:

 

Html5 Canvas画布以及绘制矩形实例

浅灰色的地方就是画布的区域了,如果画的图超过这一区域就会被自动隐藏掉。
绘制矩形

canvas 标签本身没有绘图能力,仅仅是用来建立画布,所有的绘制工作都需要 JS 来完成,创建画布的代码里已经给出了放置 JS 的区域供参考。

首先我们来创建一个最简单的矩形

 代码如下

myCanvas.fillStyle = 'blue';
myCanvas.fillRect(10, 10, 310, 110);

首先用 fillStyle 方法声明矩形的颜色,然后用 fillRect 方法声明矩形的位置和大小。

fillStyle:声明矩形颜色,可以使用十六进制色、关键字颜色、rgb、rgba,这里重点说一下 rgba,是 CSS3 的一个东西,用来建立可以透明的颜色。

fillRect:声明矩形的位置和大小,前两个属性分别是矩形的 x 轴和 y 轴,后两个属性是矩形的长度和宽度:

 

Html5 Canvas画布以及绘制矩形实例

据此,我们再建立一个透明度为 50% 的纯黑矩形:

 

 代码如下
myCanvas.fillStyle = 'blue';
myCanvas.fillRect(320, 100, 310, 110);
myCanvas.fillStyle = "rgba(0, 0, 0, 0.5)";
myCanvas.fillRect(280, 80, 310, 110);
Html5 Canvas画布以及绘制矩形实例

Canvas有两点需要注意:

 1、可以以像素的方式读写Canvas对象;
 2、可以跨站在canvas中载入图片,但是跨站载入的图片不可以以像素的方式编辑。也就是说跨站载入的图片可以显示,但是不能读取和复制。

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有5人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板