HTML5每日一练之Canvas标签的应用-绘制径向渐变图形
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML5每日一练之Canvas标签的应用-绘制径向渐变图形,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3237字,纯文字阅读大概需要5分钟。
内容图文
![HTML5每日一练之Canvas标签的应用-绘制径向渐变图形](/upload/InfoBanner/zyjiaocheng/390/2fa8e35bb9244ae1ba2e28a71c93e21a.jpg)
如果我们要绘制径向渐变我们也有类似的方法,如下:
- context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);
yStart:渐变起始点的纵坐标
xEnd:渐变结束点横坐标
yEnd:渐变结束点纵坐标
radiusStart:渐变开始圆的半径
radiusEnd:渐变结束圆的半径
最后我们通过上节课学习的addColorStop方法就可以绘制出非常漂亮的渐变了,他同样也需要设定个0-1之间的浮点数来作为渐变转折点的偏移量。
整个代码案例与上节课一样,只不过:
- 把createLinearGradiend()方法换成createRadialGradient()方法
- 参数由4个增加到6个
- addColorStop()偏移量设置,由原来的2个增加到3个
-
HTML5每日一练之Canvas标签的应用-绘制径向渐变图形 - window.onload = function()
- {
- var canvas = document.getElementById("W3Cfuns_canvas");
- var context = canvas.getContext("2d");
- var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
- g1.addColorStop(0.1, "rgb(255, 255, 0)");
- g1.addColorStop(0.3, "rgb(255, 0, 255)");
- g1.addColorStop(1, "rgb(0, 255, 255)");
- context.fillStyle = g1;
- context.fillRect(0, 0, 400, 300);
- var n = 0;
- var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
- g2.addColorStop(0.1, "rgba(255, 0, 0, 0.5)");
- g2.addColorStop(0.7, "rgba(255, 255, 0, 0.5)");
- g2.addColorStop(1, "rgba(0, 0, 255, 0.5)");
- for(var i = 0; i < 10; i++)
- {
- context.beginPath();
- context.fillStyle = g2;
- context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
- context.closePath();
- context.fill();
- }
- }
- script>