`

HTML5 canvas 之 小丑鱼

阅读更多
使用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核心技术源码技术代码

    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飘洒的星星特效html5 canvas飘洒的...

    HTML 5 Canvas基础教程 源码+PDF

    《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...

    html5canvas播放视频

    HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...

    HTML5Canvas基础教程

    资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...

    HTML5 Canvas核心技术代码

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性,使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...

    html5 canvas 图片压缩

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图像处理,包括绘制、修改和操作图像。在HTML5 Canvas中,我们可以通过JavaScript API实现图片的压缩功能,这对于优化网页性能,尤其是处理...

    HTML5 canvas仿屏保动态管道

    HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...

    HTML5 CanvasAPI

    HTML5 Canvas API 是一项强大的技术,它允许在网页中直接绘制图形、图表、图像以及动画。与传统的图像加CSS的方法相比,Canvas API 提供了一种更为灵活和强大的渲染系统,可以动态生成内容,并且能够很好地处理用户...

    《HTML5 Canvas 开发详解》第二版pdf

    《HTML5 Canvas 开发详解》第二版pdf 版

    html5 canvas 游戏

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...

    html5 canvas.rar

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...

    HTML 5 CANVAS游戏开发实战

    标题中提到的“HTML 5 CANVAS游戏开发实战”涉及到的知识点包括了HTML 5技术、CANVAS元素以及游戏开发方面的实战应用。HTML 5是最新版本的超文本标记语言,它引入了诸多新的特性来增强网页的表现性能和实现更丰富的...

    Html5-canvas之图片添加马赛克

    在现代Web开发中,HTML5的Canvas API是一个强大的工具,它允许开发者在浏览器端进行动态图形绘制和处理。本文将深入探讨如何利用HTML5 Canvas实现图片的马赛克效果,这是许多网页应用、照片编辑器和游戏中的常见功能...

    HTML5 canvas绘制流程图

    HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...

    HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码

    HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...

    HTML5 Canvas核心技术 图形、动画与游戏开发电子书

    HTML5 Canvas核心技术 图形、动画与游戏开发

    HTML5 Canvas核心技术.pdf

    HTML5 Canvas是现代网页开发中一种极为重要的图形绘制技术。它允许在网页上绘制图形,通过JavaScript控制图形的绘制细节,让网页不仅仅局限于展示静态内容,而是可以实现动态的、交互式的图形绘制。本书名为“HTML5 ...

Global site tag (gtag.js) - Google Analytics