来讲讲：HTML5教程：Canvas标签绘制线性突变图形上下文,HTML5,color,文章,标签

若天明 发表于 2015-1-15 23:11:06

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

每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习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语音识别（现在一般用在搜索上），目前相关介绍还是挺多的。为何呢？因为很简单！

灵魂腐蚀 发表于 2015-1-16 12:17:39