canvas入门学习（二）-简单图形绘制

一时失言乱红尘 2021-09-15 10:20 440阅读 0赞

以下是利用canvas绘制的简单图形：线段，矩形，三角形，五角星，仅供小白参考。

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>利用canvas绘制基本图形</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			.wrapper {
    				margin: auto;
    				border: 3px solid gold;
    				width: 1216px;
    				padding: 10px;
    			}
    			
    			canvas {
    				border: 1px solid blueviolet;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="wrapper">
    			
    			<canvas id="canvas1" width="400" height="400"></canvas>
    			
    			<canvas id="canvas2" width="400" height="400"></canvas>
    			
    			<canvas id="canvas3" width="400" height="400"></canvas>
    			
    			<canvas id="canvas4" width="400" height="400"></canvas>
    			
    			<canvas id="canvas5" width="400" height="400"></canvas>
    			
    			<canvas id="canvas6" width="400" height="400"></canvas>
    		</div>
    	</body>
    
    </html>
    <script type="text/javascript">
    	// 画线段
    	var ctx = document.getElementById("canvas1").getContext("2d");
    	ctx.beginPath();
    	ctx.moveTo(200, 100);
    	ctx.lineTo(200, 300);
    	ctx.strokeStyle = "red";
    	ctx.lineWidth = 10;
    	ctx.lineCap = "round";
    	ctx.stroke();
    
    	// 画矩形（利用线段）
    	var ctx2 = document.getElementById("canvas2").getContext("2d");
    	ctx2.beginPath();
    	ctx2.moveTo(100, 100);
    	ctx2.lineTo(100, 300);
    	ctx2.lineTo(300, 300);
    	ctx2.lineTo(300, 100);
    	ctx2.strokeStyle = "blueviolet";
    	ctx2.lineWidth = 10;
    	ctx2.lineCap = "round";
    	ctx2.closePath();
    	ctx2.stroke();
    
    	// 画三角形
    	var ctx3 = document.getElementById("canvas3").getContext("2d");
    	ctx3.beginPath();
    	ctx3.moveTo(100, 100);
    	ctx3.lineTo(100, 300);
    	ctx3.lineTo(300, 300);
    	ctx3.strokeStyle = "darkcyan";
    	ctx3.lineWidth = 10;
    	ctx3.lineCap = "square";
    	ctx3.closePath();
    	ctx3.stroke();
    	ctx3.fillStyle = "gray";
    	ctx3.fill();
    
    	// 直接画矩形(内部颜色填充)
    	var ctx4 = document.getElementById("canvas4").getContext("2d");
    	ctx4.fillStyle = "#00ff00";
    	ctx4.fillRect(50, 50, 300, 300);
    
    	// 画弧线
    	var ctx5 = document.getElementById("canvas5").getContext("2d");
    	ctx5.beginPath();
    	ctx5.arc(200, 200, 100, 0, 1.5 * Math.PI, false);
    	ctx5.lineWidth = 5;
    	ctx5.strokeStyle = "#005";
    	ctx5.stroke();
    	ctx5.closePath();
    	ctx5.fillStyle="red";
    	ctx5.fill();
    	
    	// 画五角星
    	var ctx6 = document.getElementById("canvas6").getContext("2d");
    	ctx6.beginPath();
        for (var i = 0; i < 5; i++) {
            ctx6.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,
                            -Math.sin((18+i*72)/180*Math.PI)*200+200);
            ctx6.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,
                            -Math.sin((54+i*72)/180*Math.PI)*80+200);
        }
        ctx6.closePath();
        ctx6.lineWidth=5;
        ctx6.fillStyle = "darkcyan";
        ctx6.strokeStyle = "blue";
        ctx6.fill();
        ctx6.stroke();
    </script>

效果图：

![20180513161423111][]

**温馨提示：**

更多博文，请关注：**xssy5431** 【小拾岁月】

扫码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

[20180513161423111]: /images/20210802/7de0b50c803346ffa77e81bdf232f17f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/893da896df3d4a1f8b09e5ee5a0d1c22.png