<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>覆蓋透明</title> </head> <body> <canvas id="canvas" ></canvas> <script type="text/javascript"> window.onload=function () { var dom=document.getElementById("canvas"); dom.width=800; dom.height=800; var cnt=dom.getContext('2d'); draw(cnt,100,100,400,400,10,"#058","red"); draw2(cnt,200,200,400,400,10,"#c12","rgba(0,256,0,0.8)");//改變透明度製作霧鏡 } function draw(ctx,x,y,width,height,borderwidth,bordercolor,fillcorlor) { ctx.beginPath(); ctx.rect(x,y,width,height); ctx.closePath(); ctx.lineWidth=borderwidth; ctx.fillStyle=fillcorlor; ctx.strokeStyle=bordercolor; ctx.fill(); ctx.stroke(); } function draw2(ctx,x,y,width,height,bordercorlor,borderwidth,fillcorlor) { ctx.lineWidth=borderwidth; ctx.fillStyle=fillcorlor; ctx.strokeStyle=bordercorlor; ctx.fillRect(x,y,width,height); ctx.strokeRect(x,y,width,height); } </script> </body> </html>
canvas覆蓋透明
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
2020年上半年數據庫系統工程師考試
基礎知識 ● 下列屬於 CPU 中算術邏輯單元的部件是（1）。 （1）A、程序計數器 B、加法器 C、指令寄存器 D、指令譯碼器 參考答案：（1）B ● 在 CPU 和主存之間設置