canvas具有渐变效果的矩形
分类:实例代码
canvas具有渐变效果的矩形属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了绘制矩形的功能。
矩形是具有颜色渐变效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$('can'); var cans = can.getContext('2d'); var gnt1 = cans.createLinearGradient(10,0,390,0); gnt1.addColorStop(0,'red'); gnt1.addColorStop(0.5,'green'); gnt1.addColorStop(1,'blue'); cans.fillStyle = gnt1; cans.fillRect(10,10,380,280); } window.onload=function(){ pageLoad(); } </script> </head> <body> <canvas id="can" width="400px" height="300px"></canvas> </body> </html>
canvas具有渐变效果的矩形,这样的场景在实际项目中还是用的比较多的,关于canvas具有渐变效果的矩形就介绍到这了。