<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "800px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.οnlοad=function(){
var context = document.getElementById('canvas').getContext('2d')
/* fillStyle 镜像渐变
第一步：
var radialGradient = context.createRadialGradient(300,300,0,300,300,50);
参数1：第一个圆圆心的x坐标
参数2：第一个圆圆心的y坐标
参数3：第一个圆的半径
参数4：第二个圆圆心的x坐标
参数5：第二个圆圆心的y坐标
参数6：第二个圆的半径
第二步：
linearGradient.addColorStop(0,'#fff');
linearGradient.addColorStop(0.25,'yellow');
linearGradient.addColorStop(0.50,'green');
linearGradient.addColorStop(0.60,'red');
参数1：位置的百分比
参数2：渐变的颜色
第三步：
context.fillStyle = linearGradient;
context.fillRect(0,0,800,800);
*/
var radialGradient = context.createRadialGradient(400,400,100,400,400,500);
radialGradient.addColorStop(0,'#fff');
radialGradient.addColorStop(0.25,'yellow');
radialGradient.addColorStop(0.50,'green');
radialGradient.addColorStop(0.60,'red');
radialGradient.addColorStop(0.75,'blue');
radialGradient.addColorStop(1.0,'black');
context.fillStyle = radialGradient;
context.fillRect(0,0,800,800);
}
</script> </body> </html>
928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
