来讲讲：HTML5教程：Canvas标签绘制线性突变图形

显示全部楼层 · 发表于 2015-1-15 23:11:06

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5viewport的使用能帮你做到这一点……破洛洛文章简介：HTML5逐日一练之Canvas标签的使用-绘制线性突变图形.
到今朝为止，我们利用canvas绘制图形的基础常识已先容终了，从本节入手下手，我们将先容其他对照初级的绘制常识之一——线性突变，起首我们往返顾一下《HTML5逐日一练之Canvas标签的使用-绘制矩形》中指定添补的色彩fillStyle。绘制线性突变时，我们必要利用到一个新的工具——LinearGradient工具，利用图形高低文工具的createLinearGradiend办法来创立该工具，该办法的界说以下：

context.createLinearGradient(xStart,yStart,xEnd,yEnd);

xStart：突变肇端点的横坐标
yStart：突变肇端点的纵坐标
xEnd：突变停止点横坐标
yEnd：突变停止点纵坐标

经由过程利用该办法，创立了一个利用两个坐标点的LinearGradient工具，那末突变的色彩该怎样设定？
我们经由过程LinearGradient工具后，利用addColorStop办法举行设定，该办法的示比方下：

context.addColorStop(offset,color);

利用这个办法能够追加突变的色彩，它有两个参数：
offset：是设定色彩分开突变肇端点的0-1之间的浮点数的偏移量
color：是设定绘制利用的色彩

addColorStop办法中offset参数的图示

<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>HTML5逐日一练之Canvas标签的使用-绘制线性突变图形</title>
<scripttype="text/javascript">
window.onload=function()
{
varcanvas=document.getElementById("W3Cfuns_canvas");
varcontext=canvas.getContext("2d");
varg1=context.createLinearGradient(0,0,0,300);
g1.addColorStop(0,"rgb(255,255,0)");
g1.addColorStop(1,"rgb(0,255,255)");
context.fillStyle=g1;
context.fillRect(0,0,400,300);
varn=0;
varg2=context.createLinearGradient(0,0,300,0);
g2.addColorStop(0,"rgba(0,0,255,0.5)");
g2.addColorStop(1,"rgba(0,255,0,0.5)");
for(vari=0;i<10;i++)
{
context.beginPath();
context.fillStyle=g2;
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
</script>
</head>
<body>
<canvasid="W3Cfuns_canvas"width="600"height="400"></canvas>
</body>
</html>

</p>
HTML5语音识别（现在一般用在搜索上），目前相关介绍还是挺多的。为何呢？因为很简单！

		自动登录	找回密码
密码			立即注册

[HTML5] 来讲讲：HTML5教程：Canvas标签绘制线性突变图形

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子