移动Web应用程序开发HTML5篇 (三) Canvas API

最新推荐文章于 2025-08-15 21:07:05 发布

转载最新推荐文章于 2025-08-15 21:07:05 发布 · 1.4k 阅读

文章标签：

#html5 #程序开发 #web #api #javascript #function

Web App 专栏收录该内容

10 篇文章

订阅专栏

本文深入介绍了HTML5的Canvas API，包括基本用法、绘图示例和动画制作技巧。Canvas API允许开发者利用JavaScript在网页上绘制图形和动画，成为HTML5游戏开发的重要工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。

本篇是HTML5介绍的第三篇，主要介绍HTML5的Canvas API。

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

•1. Canvas API 介绍

<canvas>是HTML5引入的一个新的元素，可以使用JavaScript来绘制图形、合成图象、以及做一些动画。<canvas>最先出现在Apple Mac OS X Dashboard中，也被应用于Safari，随着后来基于Gecko1.8的浏览器Firefox 1.5的加入变得流行起来，目前 <canvas>是HTML 5标准规范的一部分。目前最新版本的主流浏览器都支持<canvas>，支持情况如下图：

•2. Canvas 入门

一个简单的Canvas例子，代码如下：

<!DOCTYPE HTML>

<html>

<canvas id="diagonal" style="border: 1px solid;" width="200" height="200">
</canvas>
</html>
<script>
function drawDiagonal() {
// Get the canvas element and its drawing context
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
// Create a path in absolute coordinates
context.beginPath();
context.moveTo(100, 140);
context.lineTo(140, 70);
// Stroke the line onto the canvas
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>

代码运行效果如图，通过绝对坐标画出一条线：

Canvas把整个画布用坐标值进行了表示，左上角为（0，0），依次沿着X轴和Y轴延伸。坐标图如下所示：

再看一个例子：

<pre name="code" class="cpp"><html>
 <head>
  <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>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html></pre>
<div>运行效果如下图所示，分别创建了两个色块，对其进行颜色赋值和透明度设置：</div>
<div><img src="http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/02/34.jpg" alt="" width="94" height="84"></div>
<div>相关代码 <a href="http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/02/Canvas.zip">下载 </a></div>
<div><strong>•3. </strong><strong>Canvas </strong><strong>动画</strong><strong></strong></div>
<div>Canvas的动画功能是Flash的克星之一，结合了JavaScript和CSS3，可以说任何Flash能够做出的动画在Canvas中都可以实现。Canvas动画的原理和Flash类似：通过移动相应活动的图形来展示动画</div>
<div>如果是一个2D的canvas动画，那么在JavaScript中需要新建以下Object， 本例来源于KineticJS 2d JavaScript Library：</div>
<pre name="code" class="cpp">    this.canvas = document.getElementById(canvasId);
    this.context = this.canvas.getContext("2d");
    this.drawStage = undefined;
    this.listening = false;

    // Canvas Events
    this.mousePos = null;
    this.mouseDown = false;
    this.mouseUp = false;

    // Region Events
    this.currentRegion = null;
    this.regionCounter = 0;
    this.lastRegionIndex = null;

    // Animation
    this.t = 0;
    this.timeInterval = 0;
    this.startTime = 0;
    this.lastTime = 0;
    this.frame = 0;
this.animating = false;</pre>
<div>
<div>其动画部分代码：</div>
<pre name="code" class="cpp">Kinetic_2d.prototype.isAnimating = function(){
    return this.animating;
};

Kinetic_2d.prototype.getFrame = function(){
    return this.frame;
};
Kinetic_2d.prototype.startAnimation = function(){
    this.animating = true;
    var date = new Date();
    this.startTime = date.getTime();
    this.lastTime = this.startTime;

    if (this.drawStage !== undefined) {
        this.drawStage();
    }

    this.animationLoop();
};
Kinetic_2d.prototype.stopAnimation = function(){
    this.animating = false;
};
Kinetic_2d.prototype.getTimeInterval = function(){
    return this.timeInterval;
};
Kinetic_2d.prototype.getTime = function(){
    return this.t;
};
Kinetic_2d.prototype.getFps = function(){
    return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
};
Kinetic_2d.prototype.animationLoop = function(){
    var that = this;

    this.frame++;
    var date = new Date();
    var thisTime = date.getTime();
    this.timeInterval = thisTime - this.lastTime;
    this.t += this.timeInterval;
    this.lastTime = thisTime;

    if (this.drawStage !== undefined) {
        this.drawStage();
    }

    if (this.animating) {
        requestAnimFrame(function(){
            that.animationLoop();
        });
    }
};</pre>
<div>
<div>读者可以从以下地址下载源码进行测试学习：<a href="http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/02/Canvas.zip">下载地址</a>。</div>
<div>更多的例子，
<img src="http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/02/35.jpg" alt="" width="533" height="285"></div>
<div>包括Canvas 3D动画，<a href="http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/02/Canvas.zip">下载地址</a>，Canvas动画是HTML5游戏开发最重要的工具，更多关于Canvas的信息将会和接下来的CSS3一起介绍。</div>
<div>本篇完。</div>
<div>参考资料："Pro. HTML5 Programing" <a href="http://www.kineticjs.com/">http://www.kineticjs.com/</a> ...</div>
<div>相关文章：</div>
<div><a href="http://software.intel.com/zh-cn/blogs/2012/02/20/web-html5-html5/">移动Web应用程序开发 HTML5篇 (一) HTML5简介 </a></div>
<div><a href="http://software.intel.com/zh-cn/blogs/2012/02/22/web-html5/">移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试</a></div>
</div>
</div>
 <h5>
  分类： <a href="http://software.intel.com/zh-cn/blogs/category/%e5%85%a8%e5%9b%bd%e5%a4%a7%e5%ad%a6%e7%94%9f%e8%bd%af%e4%bb%b6%e5%88%9b%e6%96%b0%e5%a4%a7%e8%b5%9b%e4%b8%93%e6%a0%8f/" title="查看 全国大学生软件创新大赛专栏 中的全部文章" rel="category tag">全国大学生软件创新大赛专栏</a>, <a href="http://software.intel.com/zh-cn/blogs/category/isn/blog-contest/" title="查看 博客征文专栏 中的全部文章" rel="category tag">博客征文专栏</a>, <a href="http://software.intel.com/zh-cn/blogs/category/mobility/" title="查看 移动技术 中的全部文章" rel="category tag">移动技术</a>, <a href="http://software.intel.com/zh-cn/blogs/category/isn/" title="查看 英特尔® 软件网络 2.0 中的全部文章" rel="category tag">英特尔® 软件网络 2.0</a>, <a href="http://software.intel.com/zh-cn/blogs/category/isn/software-development-tools/" title="查看 软件开发工具 中的全部文章" rel="category tag">软件开发工具</a>, <a href="http://software.intel.com/zh-cn/blogs/category/learning/" title="查看 软件技术学习及认证 中的全部文章" rel="category tag">软件技术学习及认证</a>  
  标签：<a href="http://software.intel.com/zh-cn/blogs/tag/canvas/" rel="tag">Canvas</a>, <a href="http://software.intel.com/zh-cn/blogs/tag/html5/" rel="tag">HTML5</a>, <a href="http://software.intel.com/zh-cn/blogs/tag/web%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91/" rel="tag">Web应用开发</a>, <a href="http://software.intel.com/zh-cn/blogs/tag/%e7%a7%bb%e5%8a%a8%e5%bc%80%e5%8f%91/" rel="tag">移动开发</a> </h5>
 <p class="opttext">如需了解英特尔软件产品相关的性能和优化选项，请参阅<a href="/zh-cn/articles/optimization_notice/">优化注意事项</a>.</p><div id="comments"></div>
<style type="text/css">td.comment .dp-highlighter { width: 525px; }</style>
<script type="text/javascript">
function comment_form_check(full) {
	if(full == 'true') {
		if($("#comment_name").val().length < 1) {
			alert('姓名是必填项!');
			$("#comment_name").focus();
			return false;
		}
		if(!validate_email($("#comment_email").val())) {
			alert('电子邮件是必填项!');
			$("#comment_email").focus();
			return false;
		}
	}
	if($("#comment_text").val().length < 1) {
		alert('评论文本为必填项');
		$("#comment_text").focus();
		return false;
	}
	return true;
}
</script>
<h3 class="pagesection"> 评论 (0)</h3><div class="seperator"></div>
<h3 class="pagesection"> 引用 (7)</h3><div class="seperator"></div><ul>
<li><a href="http://software.intel.com/zh-cn/blogs/2012/02/27/web-html5-api/" rel="nofollow" target="_blank">移动Web应用程序开发 HTML5篇 (四) 多媒体API – 中文 - 英特尔® 软件网络</a>
2012年02月27日 04:38
</li><li><a href="http://software.intel.com/zh-cn/blogs/2012/03/01/webhtml5-api/" rel="nofollow" target="_blank">移动Web应用程序开发HTML5篇 (五) 地理位置API – 中文 - 英特尔® 软件网络</a>
2012年03月01日 03:42
</li><li><a href="http://software.intel.com/zh-cn/blogs/2012/03/02/webhtml5-communication-api/" rel="nofollow" target="_blank">移动Web应用程序开发HTML5篇 (六) Communication API – 中文 - 英特尔® 软件网络</a>
2012年03月02日 00:09
</li><li><a href="http://software.intel.com/zh-cn/blogs/2012/03/05/webhtml5-web-sockets-api/" rel="nofollow" target="_blank">移动Web应用程序开发HTML5篇 (七) Web Sockets API – 中文 - 英特尔® 软件网络</a>
2012年03月05日 00:04
</li><li><a href="http://software.intel.com/zh-cn/blogs/2012/03/09/webhtml5-offline-web-applications/" rel="nofollow" target="_blank">移动Web应用程序开发HTML5篇 (八) Offline Web Applications – 中文 - 英特尔® 软件网络</a>
2012年03月09日 04:16
</li><li><a href="http://software.intel.com/zh-cn/blogs/2012/03/21/webhtml5-web-storage-api/" rel="nofollow" target="_blank">移动Web应用程序开发HTML5篇 (九) Web Storage API – 中文 - 英特尔® 软件网络</a>
2012年03月20日 19:59
</li><li><a href="http://software.intel.com/zh-cn/blogs/2012/03/26/web-javascript-javascript/" rel="nofollow" target="_blank">移动Web应用程序开发 高性能JavaScript篇 (一) 为什么需要高性能JavaScript – 中文 - 英特尔® 软件网络</a>
2012年03月26日 06:43
</li></ul>

<h3 class="pagesection"> 写评论  <a target="_blank" href="http://software.intel.com/en-us/articles/comments-help-guide/"><img src="/media/images/help.gif" border="0" style="height:19px;width:19px;vertical-align:middle;"></a></h3><div>欲获得技术支持，请访问<a href="http://software.intel.com/zh-cn/articles/support/">软件支持页面</a>.</div><div class="seperator"></div>
<form action="/services/comment/post/" method="post" onsubmit="return comment_form_check('true');">
姓名 (必填)*<input id="comment_name" name="n" size="45" type="text">
电子邮件 (必填，不在本页面显示)*<input id="comment_email" name="e" size="45" type="text">
您的 URL (可选)<input name="u" size="45" type="text">

评论*
<input name="t" type="hidden" value="1345001736|e39e41e178c892845a33f75a1956a8a9">
<input name="m" type="hidden" value="4">
<input name="s" type="hidden" value="400009857">
<input name="c" type="hidden" value="3,10">
<input name="l" type="hidden" value="2">
<input name="a" type="hidden" value="475630">
<input name="p" type="hidden" value="http://software.intel.com/zh-cn/blogs/2012/02/22/webhtml5-canvas-api/">
<textarea id="comment_text" name="c" rows="10" style="width: 97%"></textarea>
<input class="button" type="submit" value="提交">
</form>