canvas /canvas 是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图,本文使用canvas标签和Javascript配合画出了一个四色渐变的播放按钮效果,效果图: 实现代码: 复制代码代码如下: !DOCTYPE HTML html head meta http-equiv="Content-Type" content="text/html; charset=gbk" title 画按钮 /title /head body canvas id="myCanvas" width="600" height="400" 您的浏览器不支持Canvas,请升级浏览器! /canvas script type = "text/javascript"
var canvas = document.getElementById('myCanvas');/*获取定义的画布*/ var ctx = canvas.getContext('2d');/*利用2维环境中进行绘画*/ drawPlayButton(ctx,200,200); drawPlayButton(ctx,400,200); drawPlayButton(ctx,300,200); function drawPlayButton(_context,x,y){ var nRadius=30;//半径 _context.save(); _context.translate(x,y); //构造线变 var yellowGrad=_context.createLinearGradient(30,0,0,30); yellowGrad.addColorStop(0, '#fccb02'); yellowGrad.addColorStop(0.5, '#fbf14d'); yellowGrad.addColorStop(1, '#ffcb02'); var blueGrad=_context.createLinearGradient(30,0,0,30); blueGrad.addColorStop(0, '#2a459c'); blueGrad.addColorStop(0.5, '#0e7adc'); blueGrad.addColorStop(1, '#2a459e'); var redGrad=_context.createLinearGradient(30,0,0,30);//通过rotate来旋转 redGrad.addColorStop(0, '#d0372f'); redGrad.addColorStop(0.5, '#e0675e'); redGrad.addColorStop(1, '#ce392d'); var greenGrad=_context.createLinearGradient(30,0,0,30);//通过rotate来旋转 greenGrad.addColorStop(0, '#059700'); greenGrad.addColorStop(0.5, '#02e003'); greenGrad.addColorStop(1, '#019a02');