html5怎么实现Photoshop渐变色效果

tangjin

作者

这篇文章主要讲解了“html5怎么实现Photoshop渐变色效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html5怎么实现Photoshop渐变色效果”吧！

代码如下:

<!DOCTYPEhtml><head><metacharset=utf-8><title>HTML5画线、圆、矩形</title><scriptsrc="<ahref="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>></head><script>$(document).ready(function(){varc=document.getElementById("drawbox");vardraw=c.getContext("2d");//获取2d内容的引用，调用绘图API</p>
<p>//指定渐变区块vargrd=draw.createLinearGradient(50,50,200,50);//坐标，长宽grd.addColorStop(0,"black");//起点颜色grd.addColorStop(1,"green");//终点颜色</p>
<p>draw.fillStyle=grd;//设为填充样式draw.fillRect(50,50,200,50);//填充进矩形内})</script></body><canvasid="drawbox"width="500"height="500"></canvas></body></html>

效果图：