html5学习之canvas模块的简单使用，作画三角形、圆形、矩形等

最新推荐文章于 2024-04-15 07:51:21 发布

Ibelievesunshine

最新推荐文章于 2024-04-15 07:51:21 发布

阅读量831

点赞数

分类专栏： javascript html5 文章标签： canvas lineTo arc fillStyle 颜色渐变

文章版权归作者所有，请不要随意转载抄袭，情节严重，追究法律责任！！

本文链接：https://blog.csdn.net/Ibelievesunshine/article/details/80886491

版权

javascript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

画一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>画一个三角形</title>
	<script type="text/javascript">
		window.οnlοad=function(){
			var c = document.getElementById("myCanvas");
			var cxt = c.getContext("2d");
			cxt.moveTo(10,10);
			cxt.lineTo(150,50);
			cxt.lineTo(10,50);
			cxt.lineTo(10,10);
			cxt.stroke();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3">Your browser does not support the canvas element</canvas>
</body>
</html>

画一个实心圆形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>画一个圆形</title>
	<script type="text/javascript">
		window.οnlοad=function(){
			var c = document.getElementById("myCanvas");
			var cxt = c.getContext("2d");
			cxt.fillStyle="red";  //画笔颜色为红色
			cxt.beginPath();      
			cxt.arc(70,18,15,0,Math.PI*2,true);  //坐标（70,18）半径为15，角度0到2*π ture为逆时针作画
			cxt.closePath();
			cxt.fill();  //实心圆
			//cxt.stroke();  //空心圆
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3">Your browser does not support the canvas element</canvas>
</body>
</html>

作一个颜色渐变的矩形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>颜色渐变的矩形</title>
	<script type="text/javascript">
		window.οnlοad=function(){
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var grd=cxt.createLinearGradient(0,0,175,50);
			grd.addColorStop(0,"#FF0000");  //开始于红色
			grd.addColorStop(1,"#00FF00");  //结束于绿色
			cxt.fillStyle=grd;
			cxt.fillRect(0,0,175,50);  //从（0,0）到（175,50）
		}
	</script>
</head>
<body>
	<canvas  id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3">Your browser does not support  the canvas element</canvas>
</body>
</html>

Ibelievesunshine

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5学习之canvas模块的简单使用，作画三角形、圆形、矩形等

画一个三角形&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;画一个三角形&lt;/title&gt; &lt;script type="text/javascript"&gt;
复制链接

扫一扫

专栏目录