徑向漸變
阿新 • • 發佈：2019-03-19
ctype utf oct stop doctype bsp rst set rip
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #canvas1{ margin: 0 auto; /*background: #efefef;*/ display: block; border: 1px solid #aaa; /*width: 600px; height: 400px;*/ } </style> </head> <body> <canvas id="canvas1" width="600" height="600"> 你的瀏覽器不支持canvas </canvas> <scripttype="text/javascript"> //找到要設置的畫布 var canvas1 = document.querySelector(‘#canvas1‘) //能夠對這個畫布畫畫的對象,就是畫筆，canvas1的上下文對象 var ctx = canvas1.getContext(‘2d‘) ctx.rect(100,100,400,400) //徑向漸變的設置 var tt = ctx.createRadialGradient(300,300,30,250,250,120) tt.addColorStop(0,‘skyblue‘) tt.addColorStop(1,‘pink‘) ctx.fillStyle = tt ctx.fill() </script> </body> </html>
徑向漸變