本文主要是介绍canvas创建放射性渐变，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-->
<html><head><title>放射性渐变</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>#canvas {background: #eeeeee;border: thin solid cornflowerblue;}</style></head><body><div display='inline'><canvas id='canvas' width='450' height='275'>Canvas not supported</canvas><script>var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),//创建一个放射性渐变 函数原型 createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)//xStart,yStart开始圆的圆心坐标 radiusStart 开始圆的半径//xEnd,yEnd结束圆的圆心坐标 radiusEnd结束圆的半径gradient = context.createRadialGradient(canvas.width / 2, canvas.height*0.8, 10,canvas.width / 2, 0, 100);gradient.addColorStop(0, 'blue');gradient.addColorStop(0.25, 'white');gradient.addColorStop(0.5, 'purple');gradient.addColorStop(0.75, 'red');gradient.addColorStop(1, 'yellow');context.fillStyle = gradient;context.rect(0, 0, canvas.width, canvas.height);context.fill();</script></div></body></html>演示地址：http://sandbox.runjs.cn/show/8vxutkq1
这篇关于canvas创建放射性渐变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
