<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
// 开始
context.beginPath()
//
var linear = context.createRadialGradient(200,200,30,200,200,100) // 原点 x y 宽 高
linear.addColorStop(0.7,"red")
linear.addColorStop(0.5,"green")
linear.addColorStop(0.3,"red")
linear.addColorStop(0.2,"green")
context.fillStyle=linear
// context.fillRect(0,0,500,300)
context.arc(200,200,100,0,2*Math.PI)
context.fill();
</script>
</body>
</html>
canvas渐变
/** @type {HTMLCanvasElement} */
这行代码可以在canvas 写代码中可以出现提示
var linear = context.createLinearGradient(20,200,100,200) // 原点 x y 宽 高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
// 开始
context.beginPath()
//
var linear = context.createLinearGradient(1,200,100,200) // 原点 x y 宽 高
linear.addColorStop(0.8,"red")
linear.addColorStop(0.5,"green")
linear.addColorStop(0.3,"red")
context.fillStyle=linear
context.fillRect(0,0,400,400)
</script>
</body>
</html>