线性渐变
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>canvas</style> .canvas{border:1px solID pink;} bodycanvas class="canvas" ID wIDth="600" height="400">您的浏览器不支持canvascanvas> script> var canvas=document.getElementByID("canvas); ctxcanvas.getContext(2d);//上下文，绘图环境 0,0 第一个点 300,300 第二个点 myliGractx.createlinearGradIEnt(0,300上述线条的0%位置为pink myliGra.addcolorStop(pink上述线条的100%位置为pink1purple将该渐变设置为填充样式 ctx.fillStylemyliGra; 绘制矩形 ctx.fillRect(); HTML>
给圆填充好看的线性渐变
给渐变分配颜色rgb(255,175,74)); myliGra.addcolorStop(.5); myliGra.addcolorStop(rgb(173,216,230) ctx.arc(1502*Math.PI,1)">true); ctx.fill(); >
改变线性渐变的角度，可以通过改变两个点的坐标来完成
>
径向渐变
150,150,0 第一个圆的圆心和半径 ctx.createradialGradIEnt(>
径向渐变的角度调整
30>
总结
以上是内存溢出为你收集整理的canvas中的渐变全部内容，希望文章能够帮你解决canvas中的渐变所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）