矩形、圆弧、线段的画法H5

小菜鸟码住

于 2019-10-06 15:04:40 发布

阅读量139

点赞数

分类专栏： h5知识

本文链接：https://blog.csdn.net/hfyldx/article/details/102230760

版权

h5知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

自己琢磨了一下，能画出自己想要的图形了
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			canvas{
				border: 1px solid red;
				display: block;
				margin: 0 auto;
				background-color: cadetblue;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="500"height="500">
			
		</canvas>
		<script>
			var can=document.getElementById('can');
			var cxt=can.getContext('2d');
			//画坦克
//			cxt.translate(20,10);
			cxt.fillStyle='green'
			cxt.fillRect(104,100,10,50);
			cxt.fillRect(56,100,10,50);
			cxt.fillStyle='yellow'
			cxt.fillRect(70,107,30,35);
			cxt.fillStyle='#000'
			cxt.fillRect(83,130,5,40);
			cxt.beginPath();
			cxt.closePath();
			cxt.arc(85,120,10,0*Math.PI,2*Math.PI)
			cxt.fillStyle='blue'
			cxt.fill()
			cxt.stroke()
			 
			 //画星星
			  cxt.beginPath();
			cxt.moveTo(100,400);
			cxt.lineTo(200,400);
			cxt.lineTo(120,480);
			cxt.lineTo(150,350);
			cxt.lineTo(190,480);
			cxt.lineTo(100,400);
			cxt.fillStyle='yellow'
			cxt.fill();
			
			//画八卦图
			cxt.beginPath();
			cxt.closePath();
			cxt.arc(300,250,100,1.5,1.5*Math.PI,false);
			cxt.fillStyle='black';
			cxt.fill();
			cxt.beginPath();
			cxt.closePath();
			cxt.arc(300,250,100,1.5,1.5*Math.PI,true);
			cxt.fillStyle='white'
			cxt.fill();
			cxt.beginPath();
			cxt.closePath();
			cxt.arc(300,200,50,0,2*Math.PI);
			cxt.fillStyle='white'
			cxt.fill();
			cxt.beginPath();
			cxt.closePath();
			cxt.arc(300,300,50,0,2*Math.PI);
			cxt.fillStyle='black'
			cxt.fill();
			cxt.beginPath();
			cxt.closePath();
			cxt.arc(300,200,5,0,2*Math.PI);
			cxt.fillStyle='black'
			cxt.fill();
			cxt.beginPath();
			cxt.closePath();
			cxt.arc(300,300,5,0,2*Math.PI);
			cxt.fillStyle='white'
			cxt.fill();
			
		</script>
	</body>
</html>

效果展示
在这里插入图片描述

小菜鸟码住

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
矩形、圆弧、线段的画法H5

自己琢磨了一下，能画出自己想要的图形了代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> canvas{ border: 1px solid red; displ...
复制链接

扫一扫