HTML5 canvas半棵松树

iteye_18039

于 2012-02-28 17:24:13 发布

阅读量381

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_18039/article/details/82283362

html5 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用HTML5的Canvas元素及JavaScript进行图形绘制，包括设置画布、定义路径、填充颜色等基本操作。

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


 <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>

效果图：