canvas3:绘制感叹号
【摘要】
视频课堂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>
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/78749869
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）