canva基础学习（一）

最新推荐文章于 2025-09-03 13:31:31 发布

原创

最新推荐文章于 2025-09-03 13:31:31 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了使用Canva进行基础图形绘制，特别是如何通过修改函数参数轻松创建不同形状和旋转角度的矩形，展示了Canva的灵活性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
			你当前的浏览器不支持canvas，请更换浏览器再试。
		</canvas>
		
		<script>
			
			window.onload = function(){
				var canvas = document.getElementById("canvas");
				
				canvas.width = 800;
				canvas.height = 800;
				
				var context = canvas.getContext("2d");
				
				context.lineWidth = 50;
				context.strokeStyle = "#005588";
				
				context.beginPath();
				context.moveTo(100,200);
				context.lineTo(700,200);
				context.lineCap = "butt";
				context.stroke();