html感叹号图形代码,canvas3:绘制感叹号

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

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);