使用html 的新特性绘制的小丑鱼,的确很丑哦。
之前使用canvas做过复杂的应用,性能还不错 :)
小丑鱼图片:
<canvas> element 介绍
<canvas id="tutorial" width="150" height="150"></canvas>
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
创建canvas
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
页面前端代码
<body>
<!-- Start Draw View Range -->
<div id="placeholder" style="WIDTH: 600px; HEIGHT: 600px"></div>
<!-- End Draw View Range -->
</body>
页面canvas代码,支持IE版本
function constructCanvas() {
function makeCanvas(width, height) {
var c = document.createElement('canvas');
c.width = width;
c.height = height;
if ($.browser.msie) // excanvas hack
c = window.G_vmlCanvasManager.initElement(c);
return c;
}
canvasWidth = target.width();
canvasHeight = target.height();
target.html(""); // clear placeholder
if (target.css("position") == 'static')
target.css("position", "relative"); // for positioning labels and overlay
if (canvasWidth <= 0 || canvasHeight <= 0)
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
if ($.browser.msie) // excanvas hack
window.G_vmlCanvasManager.init_(document); // make sure everything is setup
// the canvas
canvas = $(makeCanvas(canvasWidth, canvasHeight)).appendTo(target).get(0);
ctx = canvas.getContext("2d");
// overlay canvas for interactive features
overlay = $(makeCanvas(canvasWidth, canvasHeight)).css({ position: 'absolute', left: 0, top: 0 }).appendTo(target).get(0);
octx = overlay.getContext("2d");
octx.stroke();
}
实例请见附件
分享到:
相关推荐
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性,使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图像处理,包括绘制、修改和操作图像。在HTML5 Canvas中,我们可以通过JavaScript API实现图片的压缩功能,这对于优化网页性能,尤其是处理...
HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...
HTML5 Canvas API 是一项强大的技术,它允许在网页中直接绘制图形、图表、图像以及动画。与传统的图像加CSS的方法相比,Canvas API 提供了一种更为灵活和强大的渲染系统,可以动态生成内容,并且能够很好地处理用户...
《HTML5 Canvas 开发详解》第二版pdf 版
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...
标题中提到的“HTML 5 CANVAS游戏开发实战”涉及到的知识点包括了HTML 5技术、CANVAS元素以及游戏开发方面的实战应用。HTML 5是最新版本的超文本标记语言,它引入了诸多新的特性来增强网页的表现性能和实现更丰富的...
在现代Web开发中,HTML5的Canvas API是一个强大的工具,它允许开发者在浏览器端进行动态图形绘制和处理。本文将深入探讨如何利用HTML5 Canvas实现图片的马赛克效果,这是许多网页应用、照片编辑器和游戏中的常见功能...
HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...
HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...
HTML5 Canvas核心技术 图形、动画与游戏开发
HTML5 Canvas是现代网页开发中一种极为重要的图形绘制技术。它允许在网页上绘制图形,通过JavaScript控制图形的绘制细节,让网页不仅仅局限于展示静态内容,而是可以实现动态的、交互式的图形绘制。本书名为“HTML5 ...