html5-canvas绘图功能绘制五角星

最新推荐文章于 2024-04-15 13:20:28 发布

candy755

最新推荐文章于 2024-04-15 13:20:28 发布

阅读量9.7k

点赞数 3

分类专栏： canvas 文章标签： canvas 五角星

本文链接：https://blog.csdn.net/candy755/article/details/82666859

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我先简单的介绍下HTML5 新增的canvas标签， canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下图是基本绘制的步骤，需要注意的是:Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 标记。

现在我将利用这些步骤和属性做个简单的五角星，代码如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">
			window.onload=function(){
				var c=document.getElementById("mycanvas");//获取canvas对象
				var  context=c.getContext("2d");//构建2d环境
				 context.beginPath();
				 context.moveTo(70,30);//作线的起点
				 context.lineTo(30,140);//线的终点
				 context.lineTo(125,70);
				 context.lineTo(10,70);
				 context.lineTo(100,140);
				 context.closePath();//结束/闭合
				 context.strokeStyle="red";//线的颜色
				 context.stroke();//线的输出
	
				 context.beginPath();
				 context.moveTo(200,30);
				 context.lineTo(160,140);
				 context.lineTo(257,70);
				 context.lineTo(140,70);
				 context.lineTo(231,140);
				 context.closePath();//结束/闭合
				 context.fillStyle="gold";//填充的背景色
				 context.fill()//填充
			}
			
			
		</script>
	</head>
	<boby>
	<canvas id="mycanvas" style="width:300px;height:150px; background:black;"></canvas>
	</boby>
	
</html>

效果图如下（其中一个是线性一个是填充的）：

好了，今天分享到这啦，依旧是元气满满的一天，加油！

candy755

关注

3
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
html5-canvas绘图功能绘制五角星

我先简单的介绍下HTML5 新增的canvas标签， canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下图是基本绘制的步骤，需要注意的是:Internet Explorer 8 及更早 IE 版本的浏览器不支持 &lt;canvas&gt; 标记。现在我将利用这...
复制链接

扫一扫