应用javascript和HTML5 Canvas画的4渐变色色播发按钮实

日期:2021-02-25 类型:科技新闻 

关键词:微信小程序商城,免费微信小程序,小程序设计软件,小程序生成平台,可查询的小程序

<canvas></canvas>是html5出現的新标识,像全部的dom目标1样它有自身自身的特性、方式和恶性事件,在其中就有制图的方式,js可以启用它来开展制图,本文应用canvas标识和Javascript相互配合画出了1个4色渐变色的播发按钮实际效果,实际效果图:

完成编码:


拷贝编码
编码以下:
<!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');

//绘图两弧夹角內容
drawCake(_context,0,yellowGrad,nRadius);
drawCake(_context,Math.PI/2,blueGrad,nRadius);
drawCake(_context,Math.PI,redGrad,nRadius);
drawCake(_context,3*Math.PI/2,greenGrad,nRadius);
//内圆色调
var lingrad =_context.createLinearGradient(⑶0,⑶0,30,30);
lingrad.addColorStop(0, '#4672df');
lingrad.addColorStop(0.2, '#6188e5');
lingrad.addColorStop(0.5, '#98b1ef');
lingrad.addColorStop(0.8, '#b1c3f2');
lingrad.addColorStop(1, '#eaedfc');
_context.save();
_context.beginPath();//内圆
_context.fillStyle=lingrad;
_context.arc(0,0,nRadius⑴0,0,Math.PI*2,true);
_context.fill();
_context.closePath();
_context.restore();
//绘图3角
var trianglerad=_context.createLinearGradient(⑹,⑴0,⑹,10);
trianglerad.addColorStop(0, '#99d4ea');
trianglerad.addColorStop(0.2, '#5e8fdd');
trianglerad.addColorStop(0.5, '#0f17a1');
trianglerad.addColorStop(0.8, '#4c65cc');
trianglerad.addColorStop(1, '#7299e5');
_context.beginPath();
_context.fillStyle=trianglerad;
_context.moveTo(12,0);
_context.lineTo(⑹,10);
_context.lineTo(⑹,⑴0);
_context.fill();
_context.restore();
}
//美术绘画1个扇形
function drawCake(_context,_nRotateAngle,_fillColor,_nRadius){
_context.save();
_context.beginPath();
_context.fillStyle=_fillColor;
_context.rotate(_nRotateAngle);
_context.moveTo(_nRadius⑴0,0);
_context.lineTo(_nRadius,0);//向右画1根线
_context.arc(0,0,_nRadius,0,Math.PI/2,false);
_context.lineTo(0,_nRadius⑴0);//向上画1个
_context.arc(0,0,_nRadius⑴0,Math.PI/2,0,true); //逆时针画内弧
_context.fill();
_context.closePath();
_context.restore();
}
</script>
</body>
</html>

上一篇:用HTML5制做视頻拼图的实例教程 返回下一篇:没有了