canvas学习（二）

最新推荐文章于 2024-11-05 00:04:32 发布

xndxqx

最新推荐文章于 2024-11-05 00:04:32 发布

阅读量448

点赞数

CC 4.0 BY-SA版权

分类专栏： html5及Css

本文链接：https://blog.youkuaiyun.com/u013591052/article/details/18925841

html5及Css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了 HTML Canvas 的基本用法，包括样式设置、文本绘制及颜色填充，通过简单的实例展示了如何使用 JavaScript 在 Canvas 上实现文本显示。

html文件：

<!DOCTYPE html>
<html>
	<head>
	<title>A simple canvas Example</title>
		<style>
			body{
				background: #dddddd;
			}
			#canvas {
				margin: 10px;
				padding: 10px;
				background: #ffffff;
				border: thin inset #aaaaaa;
				width:800px;
				height:300px;
			}
		</style>
	</head>
	<body>
		<canvas id = 'canvas' width = '600' height = '300'>
			Canvas not supported
		</canvas>
		<script src = 'example.js'></script>
	</body>
</html>

example.js

var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d');
	
context.font = '18px Arial';
context.fillStyle = 'cornflowerblue';

context.strokeStyle = 'green';
context.fillText('Hello Canvas1',canvas.width/2 - 111,
								canvas.height/2 + 15);
								
context.font = '38px Arial';
context.strokeStyle = 'yellow';
context.strokeText('Hello Canvas22',canvas.width/2 - 150,
								  canvas.height/2 + 150);