关于context.createLinearGradient(0,0,200,200);
来源：5-2 编程练习
慕雪9296518
2020-06-11 11:21:32
<!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 linear = context.createLinearGradient(0,0,200,200);
linear.addColorStop(0,'orange');
linear.addColorStop(0.5,'pink');
linear.addColorStop(1,'lightblue');
context.fillStyle = linear;
context.translate(100,100);
context.arc(100,100,100,0,2*Math.PI,true);
context.fill();
</script>
</body>
</html>
老师好，我想问下var linear = context.createLinearGradient(0,0,200,200);这里的坐标是基于整个canvas的，还是基于用这个style的图形的起始点而定的？因为我试着加入translate，发现图片的色块基本不变
1回答
-
好帮手慕久久
2020-06-11
同学你好，代码正确，问题解答如下：
context.createLinearGradient(0,0,200,200);是基于填充的图形的起始点而定的，但是填充图形的绘制与canvas坐标系有关系，所以渐变的最终方向与画布的坐标系会有关系，如下：
当context.translate(100,100);时，圆形中的渐变如下：
如果再旋转45deg，渐变的方向就会改变，如下：
对于该点同学了解一下即可，不用深究。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题