来讲讲：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语音识别（现在一般用在搜索上），目前相关介绍还是挺多的。为何呢？因为很简单！

只看该作者 · 发表于 2015-1-16 12:17:39

由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-1-27 09:21:40

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-2-5 12:33:02

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-2 21:08:19

可以使用 CSS 检查工具进行设计。

只看该作者 · 发表于 2015-3-11 07:40:31

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-3-18 04:24:14

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-25 16:47:06

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

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

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

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

相关帖子

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