- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

canvas3:绘制感叹号

tea_year 发表于 2021/12/30 00:54:29 2021/12/30

【摘要】视频课堂https://edu.csdn.net/course/play/7621 使用Canvas按照代码会出现如下图形显示： <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title&...

视频课堂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>