来讲讲：HTML5教程：Canvas标签绘制径向突变图形

只看该作者 · 发表于 2015-1-15 23:11:06

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

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

x

HTML5语音识别（现在一般用在搜索上），目前相关介绍还是挺多的。为何呢？因为很简单！破洛洛文章简介：HTML5逐日一练之Canvas标签的使用-绘制径向突变图形.
我们进修了怎样利用Canvas绘制线性突变图形，明天我们来进修一下怎样绘制径向突变图形。经由过程上节课的进修，我们晓得绘制线性突变图形用到了一个十分主要的函数——createLinearGradiend();
假如我们要绘制径向突变我们也有相似的办法，以下：

context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

xStart：突变肇端点的横坐标
yStart：突变肇端点的纵坐标
xEnd：突变停止点横坐标
yEnd：突变停止点纵坐标
radiusStart：突变入手下手圆的半径
radiusEnd：突变停止圆的半径
最初我们经由过程上节课进修的addColorStop办法就能够绘制出十分大度的突变了，他一样也必要设定个0-1之间的浮点数来作为突变转机点的偏移量。
全部代码案例与上节课一样，只不外：

把createLinearGradiend()办法换成createRadialGradient()办法
参数由4个增添到6个
addColorStop()偏移量设置，由本来的2个增添到3个

<!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.createRadialGradient(400,0,0,400,0,400);
g1.addColorStop(0.1,"rgb(255,255,0)");
g1.addColorStop(0.3,"rgb(255,0,255)");
g1.addColorStop(1,"rgb(0,255,255)");
context.fillStyle=g1;
context.fillRect(0,0,400,300);
varn=0;
varg2=context.createRadialGradient(250,250,0,250,250,300);
g2.addColorStop(0.1,"rgba(255,0,0,0.5)");
g2.addColorStop(0.7,"rgba(255,255,0,0.5)");
g2.addColorStop(1,"rgba(0,0,255,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>
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展.

只看该作者 · 发表于 2015-1-17 20:30:31

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-2-3 11:22:26

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-2-8 21:19:37

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-2-26 11:24:34

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

只看该作者 · 发表于 2015-3-8 14:19:29

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-3-16 04:17:20

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-3-22 20:20:52

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

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

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

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

相关帖子