當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

canvas3:绘制感叹号

發布時間：2024/1/23 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 canvas3:绘制感叹号小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

視頻課堂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>

總結

以上是生活随笔為你收集整理的canvas3:绘制感叹号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

感叹号