首页 > 代码库 > Canvas学习-1

Canvas学习-1

简单示例


<!DOCTYPE html><html>	<head>		<style>			body{				background: #dddddd;			}			#canvas{				margin:10px;				padding:10px;				background: #ffffff;			}		</style>	</head>	<body>		<canvas id=‘canvas‘ width=‘600‘ height=‘300‘>			Canvas not supported		</canvas>		<script type="text/javascript">			var canvas =document.getElementById(‘canvas‘);			context=canvas.getContext(‘2d‘);			context.font=‘38pt Arial‘;			context.fillStyle=‘cornflowerblue‘;			context.strokeStyle=‘blue‘;			context.fillText(‘Hello Valentine‘,canvas.width/2-150,canvas.height/2+15);			context.fillStroke(‘Hello Valentine‘,canvas.width/2-150,canvas.height/2+15);		</script>	</body>	<footer></footer></html>

注意:canvas默认大小为300*150像素

Canvas学习-1