canvas学习

最新推荐文章于 2024-07-17 20:16:35 发布

「已注销」

最新推荐文章于 2024-07-17 20:16:35 发布

阅读量93

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53915541/article/details/115483819

版权

第一课(简单介绍)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		body {
    
			text-align: center;
			padding-top: 20px;
		}

		canvas {
    
			box-shadow: 0 0 10px #333;
			margin: 0 auto;
		}
	</style>
	<body onload="draw()">
		<canvas id="canvas" width="800" height="600">
			你的浏览器太low了，请更新~~~
		</canvas>
	</body>
	<script>
		function draw() {
    
			var canvas = document.getElementById('canvas');
			if (canvas.getContext) {
    
				// 相当于画笔（ctx）
				var ctx = canvas.getContext('2d');
				// 添加颜色，（注意颜色等都要在图形画出来之前添加，否则失效）
				ctx.fillStyle = 'rgb(200,0,0)'
				// 画一个矩形（x,y,宽，高）
				ctx.fillRect(10,10,350,300)
				// 再画一个矩形
				ctx.fillStyle= 'rgba(0,0,200,0.5)'
				ctx.fillRect(30,30,350,300)
				
				// 描边的两个矩形
				ctx.strokeStyle= 'rgb(200,0,0)'
				ctx.strokeRect(10,10,350,300)
				ctx.strokeStyle= 'rgba(0,0,200,0.5)'
				ctx.strokeRect(30,30,350,300)
			}
		}
	</script>
</html>

第二课（绘制空心矩形）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		body {
    
			text-align: center;
			padding-top: 20px;
		}

		canvas {
    
			box-shadow: 0 0 10px #333;
			margin: 0 auto;
		}
	</style>
	<body onload="draw()">
		<canvas id="canvas" width="800" height="600">
			你的浏览器太low了，请更新~~~
		</canvas>
	</body>
	<script>
		function draw() {
    
			var canvas = document.getElementById('canvas');
			if (canvas.getContext) {
    
				// 相当于画笔（ctx）
				var ctx = canvas.getContext('2d');
				// 绘制一个填充的矩形
				ctx.fillRect(25,25,100,100);
				// 清除指定矩形区域
				ctx.clearRect(45,45,60,60);
				// 绘制一个描边的矩形
				ctx.strokeRect(50,50,50,50)
			}
		}
	</script>
</html>

第三课(绘制三角形)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		body {
    
			text-align: center;
			padding-top: 20px;
		}

		canvas {
    
			box-shadow: 0 0 10px #333;
			margin: 0 auto;
		}
	</style>
	<body onload="draw()">
		<canvas id="canvas" width="800" height="600">
			你的浏览器太low了，请更新~~~
		</canvas>
	</body>
	<script>
		function draw() {
    
			var canvas = document.getElementById('canvas')

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas学习

第一课(简单介绍)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> body { text-align: center; padding-top: 20px; } canvas { box-shadow: 0 0 1
复制链接

扫一扫