HTML5 canvas半棵松树 - guoyiqi - ITeye博客

`

guoyiqi

浏览: 1009487 次

最近访客更多访客>>

wry3407

zzc125

bingjava

秋天你慢慢来

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

18335864773：很多公司项目都在使用pageoffice 来操作word，e ...
用java生成word文档
Gozs_cs_dn：请问下博主, 怎样将sitemesh3.xsd绑定 sitem ...
SiteMesh3配置
Rose_06：
springside4.0quick-start.bat报错原因
ilemma：我也是刚参见工作啊,经理让自学这个,有些东西不太懂,能不能发个 ...
Apache Shiro在Web中的应用
shanbangyou：你废了
程序员上班打酱油的方法

HTML5 canvas半棵松树

博客分类：

html5

阅读更多

 <html>
<head>
	<title>ExplorerCanvas Example 1</title>
	<!--[if IE]><script type="text/javascript" src="excanvas_r3/excanvas.js"></script><![endif]-->

	<style>
		body {
			background-color:white;
			margin:50px;
			text-align:center;
		}

		canvas {
			border:1px solid #444;
		}
	</style>

<script type="text/javascript">
		function load() {
			canvas = document.getElementById("cv");
			ctx = canvas.getContext("2d");


                        ctx.save();
                        ctx.translate(100,100);
                        ctx.beginPath();
                        ctx.moveTo(0,0);   
                        ctx.lineTo(10,0);   
                        ctx.lineTo(10,-10);  
                        ctx.lineTo(20,-10);  
                        ctx.lineTo(10,-20);  
                        ctx.lineTo(20,-20);  
                        ctx.lineTo(10,-30);
                        ctx.lineTo(20,-30);
                        ctx.lineTo(0,-50);  
                        ctx.closePath(); 
                        ctx.lineWidth =4;
                        ctx.lineJoin = 'round';   
                        ctx.strokeStyle = '#663300';
                        ctx.stroke();
                        ctx.fillStyle = '#339900';
                        ctx.fill(); 
                        ctx.restore();
                        
		};

		
</script>


</head>
<body onload="load();">
	<canvas id="cv" width="400" height="300"></canvas>
</body>
</html>

效果图：

查看图片附件

分享到：

程序员必须知道的编程格言 | HTML5 canvas变换

2012-02-28 17:24
浏览 522
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复...

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

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

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

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

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

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

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

html5 canvas 教程 pdf中文版天涯浪子: HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，无需依赖任何外部插件。这个“HTML5 Canvas 教程 pdf中文版天涯浪子”资源显然是一份专为初学者和进阶者设计的指南，旨在帮助他们...

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

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

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

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

html5，canvas扇形菜单: HTML5和Canvas是现代网页开发中的重要技术，它们为创建动态、交互式的用户界面提供了强大的工具。Canvas是HTML5的一个核心元素，它允许开发者通过JavaScript在网页上进行2D绘图，无需借助Flash或其他插件。这个...

Global site tag (gtag.js) - Google Analytics