canvas3:绘制感叹号

项目
实战项目总结分析,源代码,视频分享
tea_year

视频课堂https://edu.csdn.net/course/play/7621

使用Canvas按照代码会出现如下图形显示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
		<script>
			function draw(){
				var c=document.getElementById("canvas");
				var ctx=c.getContext("2d");
				
				var width=120;
				var height=110;
				var padding=50;
				
				//开始绘制;
				ctx.beginPath();
				ctx.moveTo(padding+width/2,padding);
				ctx.lineTo(padding+width,height+padding);
				ctx.lineTo(padding,padding+height);
				ctx.closePath();
				ctx.shadowBlur=10;
				ctx.shadowColor="black";
				//2.使用垂直渐变颜色进行填充;
				var color=ctx.createLinearGradient(0,padding,0,padding+height);
				color.addColorStop(0,"#faf100");
				color.addColorStop(0.9,"#fca009");
				color.addColorStop(1,"#ffc821");
				//绘制最外侧边框;
				ctx.lineWidth=20;
				ctx.lineJoin="round";
				ctx.strokeStyle=color;
				ctx.stroke();
				//3.填充内部
				//绘制内部填充
				ctx.shadowColor="transparent";
				ctx.fillStyle=color;
				ctx.fill();
				//4.绘制黑色边框;
				ctx.lineWidth=5;
				ctx.lineJoin="round";
				ctx.strokeStyle="#333";
				ctx.stroke();
				//5.绘制中心的感叹号;
				ctx.textAlign="center";
				ctx.textBaseline="middle";
				ctx.font="bold 60px 'Times New Roman', Times, serif";
				ctx.fillStyle="#333";
				ctx.fillText("!",(padding+width/2),padding+height/1.5);
			}
			window.addEventListener("load",draw(),true);
		</script>
	</body>
</html>





©️2020 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值