带来一篇Canvas教程(2):基础用法

显示全部楼层 · 发表于 2015-1-15 23:19:37

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

HTML5TheMediaCaptureAPI提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签网页制造poluoluo文章简介：canvas是一个新的HTML元素，这个元素能够被Script言语(一般是JavaScript)用来绘制图形。比方能够用它来绘图、分解图像、或做复杂的(和不那末复杂的)动画。左面的图像展现了一些canvas的使用示例，我们将会在此教程中看到他们的完成。canvas开始在苹果公司(Apple)的Mac
<canvas>是一个新的HTML元素，这个元素能够被Script言语(一般是JavaScript)用来绘制图形。比方能够用它来绘图、分解图像、或做复杂的(和不那末复杂的)动画。左面的图像展现了一些<canvas>的使用示例，我们将会在此教程中看到他们的完成。
<canvas>开始在苹果公司(Apple)的MacOSXDashboard上被引进，尔后被使用于Safari。基于Gecko1.8的扫瞄器，比方Firefox1.5，也撑持这个新元素。元素<canvas>是WhatWGWebapplications1.0也就是人人都晓得的HTML5尺度标准的一部分。
在本教程中，我将试着报告怎样在你本人的网页中利用<canvas>元素。供应的示例应当会给你些明晰观点，即用<canvas>能做些甚么的。这些示例也可作为你使用<canvas>的出发点。
入手下手利用之前
用元素<canvas>其实不难，只需你具有HTML和JavaScript的基本常识。
如上所述，并非一切古代扫瞄器都撑持<canvas>元素，以是你必要Firefox1.5或更新版本、大概其他基于Gecko的扫瞄器比方Opera9、大概比来版本的Safari才干看到一切示例的举措。
<canvas>元素
Letsstartthistutorialbylookingatthe<canvas>elementitself.
让我们从<canvas>元素的界说入手下手吧。

<canvasid="tutorial"width="150"height="150"></canvas>

复制代码

Thislooksalotlikethefunctiondraw(){varcanvas=document.getElementById(tutorial);if(canvas.getContext){varctx=canvas.getContext(2d);}}</script><styletype="text/CSS">canvas{border:1pxsolidblack;}</style></head><bodyonload="draw();"><canvasid="tutorial"width="150"height="150"></canvas></body></html>[/code]IfyoulookatthescriptyoullseeIvemadeafunctioncalleddraw,whichwillgetexecutedoncethepagefinishesloading(viatheonloadattributeonthebodytag).ThisfunctioncouldalsohavebeencalledfromasetTimeout,setInterval,oranyothereventhandlerfunctionjustaslongthepagehasbeenloadedfirst.
仔细的你会发明我筹办了一个名为draw的函数，它会在页面装载终了以后实行一次（经由过程设置body标签的onload属性），它固然也能够在setTimeout，setInterval，大概其他事务处置函数中被挪用。
一个复杂的例子

Tostartoff,heresasimpleexamplethatdrawstwointersectingrectangles,oneofwhichhasalphatransparency.Wellexplorehowthisworksinmoredetailinlaterexamples.
作为入手下手，来一个复杂的吧——绘制两个交织的矩形，个中一个是有alpha通明效果。我们会在前面的示例中具体的让你懂得它是怎样运作的。

<html><head><scripttype="application/x-javascript">functiondraw(){varcanvas=document.getElementById("canvas");if(canvas.getContext){varctx=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><bodyonload="draw();"><canvasid="canvas"width="150"height="150"></canvas></body></html>

复制代码

</p>
但他也直言说，这就像写软件时，在添加改善的新功能时，难免遭遇稳定性的问题，必须先把问题清除干净，才能推出新产品。

		自动登录	找回密码
密码			立即注册

[HTML5] 带来一篇Canvas教程(2):基础用法

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子