canvas3:绘制感叹号
来源:互联网 发布:南京润和软件 编辑:程序博客网 时间:2024/05/22 16:05
使用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>
阅读全文
0 0
- canvas3:绘制感叹号
- Canvas3——绘制渐变图形与绘制变形图形
- Canvas3 汉化补丁发布
- HTML5之canvas3
- Canvas3 绘图和重叠
- Canvas3 汉化QA和BUG反馈
- SVN感叹号
- 双感叹号
- 红感叹号
- 红色感叹号
- 我的J2ME编程练习(8)——Canvas3
- 绘制
- alert带感叹号
- js双感叹号判断
- android出现感叹号
- svn出现红色感叹号
- eclipse 红色感叹号
- function与感叹号
- 安卓系统app可用内存分析
- android+测试基础3(基本知识点)
- 欢迎使用CSDN-markdown编辑器
- public、protect、private继承方式 C++(转)
- Jenkins常用Plugins
- canvas3:绘制感叹号
- MySQL学习(数据库和表的基本操作)
- 如何使MFC编写的程序作为服务运行,并正常显示界面
- vfork和fork
- 20171207
- SpringBoot加载静态资源
- Java 深入学习(17) —— 类的初始化
- spring cloud配置文件
- 如何动态的添加下拉菜单跟复选框及submit与button的使用差别