html5 canvas学习--创建阴影

xiaopengyaonixi

于 2016-10-07 21:08:32 发布

阅读量394

点赞数

分类专栏： Html5

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			ctx.shadowOffsetX = 3;
			ctx.shadowOffsetY = 3;
			ctx.shadowBlur = 2;
			ctx.shadowColor = "rgba(0,0,0,0.5)";
			ctx.fillStyle = "#33ccff";
			ctx.fillRect(20,20,300,60);
			ctx.fill();
			ctx.font = "45px 黑体";
			ctx.fillStyle = "white";
			ctx.fillText("Html5+CSS3",30,64);
		}
		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>