径向html5,html5中canvas径向渐变（发散）

html5中canvas径向渐变(发散)

2019年12月06日

阅读数：12

这篇文章主要向大家介绍html5中canvas径向渐变(发散),主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。

canvas径向渐变(发散)

var canvas=document.getElementById("myCanvas");

var context=canvas.getContext("2d");

//同一个圆心画球形

var g1=context.createRadialGradient(200,150,0,200,150,50);

g1.addColorStop(0.1,'rgb(255,0,0)');

g1.addColorStop(1,'rgb(50,0,0)');

context.fillStyle=g1;

context.beginPath();

context.arc(200,150,100,0,Math.PI*2,false);

context.closePath();

context.fill();

//不一样圆心看径向渐变模型

var g1=context.createRadialGradient(50,150,10,100,150,20);

g1.addColorStop(0.1,'rgb(240,0,2)');

g1.addColorStop(0.5,'rgb(12,200,1)');

g1.addColorStop(1,'rgb(0,2,300)');

context.fillStyle=g1;

context.fillRect(0,0,180,200);