老师,这样可以吗?
来源:5-2 编程练习
慕丝5187111
2018-11-04 10:34:37
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas渐变</title> </head> <body> <canvas id="canvas" width="600px" height="600px">您的浏览器不支持</canvas> <script> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); //在此处补充代码 var linearGradient = context.createLinearGradient(50,50,250,250); linearGradient.addColorStop(0,'orange'); linearGradient.addColorStop(0.5,'pink'); linearGradient.addColorStop(1,'blue'); context.fillStyle = linearGradient; context.arc(150,150,100,0,2*Math.PI,true); context.stroke(); context.fill(); </script> </body> </html>
1回答
效果图是没有边框的,可以将stroke的步骤去除;建议将渐变位置以及渐变颜色在调整下。参考:
自己修改测试下。
祝学习愉快!