来讲讲:HTML5教程:Canvas标签绘制径向突变图形
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标准化运动的发展. 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。 学Dreamweaver技术的过程其实是一个增加信心的过程。 还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
页:
[1]