带来一篇HTML5实例教程:Canvas标签坐标变更与路径分离

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

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

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

x

就在新标准备受瞩目之际，两大网络监督机构却起冲突。破洛洛文章简介：HTML5逐日一练之Canvas标签的使用-坐标变更与路径分离利用.
到今朝为止，我们已学会了良多Canvas的绘制办法，假如我们要绘制图形怎样办呢？
我们必要对矩形变形，利用坐标变更就充足了。可是对利用路径绘制出来的图形举行幻化的时分，那末要思索的事变就多了。由于利用坐标变更以后，已创立好的路径就不成用了。必需要从头创立路径，从头创立路径后，坐标变更办法又生效了。

办理思绪
1、必需先别的绘制一个创立路径的函数。
2、在座标幻化的同时挪用该函数。

代码案例

<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>HTML5逐日一练之Canvas标签的使用-坐标变更与路径分离利用</title>
<scripttype="text/javascript">
window.onload=function()
{
createPic();
}
//创立图形
functioncreatePic()
{
varcanvas=document.getElementById("W3Cfuns_canvas");
varcontext=canvas.getContext("2d");
context.fillStyle="#d4d4d4";
context.fillRect(0,0,400,300);
//绘制图形
context.translate(200,50);
for(vari=0;i<50;i++)
{
context.translate(25,25);
context.scale(0.95,0.95);
context.rotate(Math.PI/8);
createStar(context);//此办法专门绘制五角星
context.fill();
}
}
//创立五角星的办法
functioncreateStar(c)
{
varn=0;
vardx=100;
vardy=0;
vars=50;
varx=Math.sin(0);
vary=Math.cos(0);
vardig=Math.PI/5*4;
//创立路径
c.beginPath();
c.fillStyle=toRGB(parseInt(Math.random()*(255-0+1)+0),parseInt(Math.random()*(255-0+1)+0),parseInt(Math.random()*(255-0+1)+0));
for(vari=0;i<5;i++)
{
x=Math.sin(i*dig);
y=Math.cos(i*dig);
c.lineTo(dx+x*s,dy+y*s);
}
c.closePath();
}
//小于10补零
functionaddZero(string){returnstring.length==2?string:0+string;}
//随即色彩
functiontoRGB(redValue,greenValue,blueValue)
{
var
rgbR=addZero(redValue.toString(16),2),
rgbG=addZero(greenValue.toString(16),2),
rgbB=addZero(blueValue.toString(16),2);
varrgb="#"+rgbR+rgbG+rgbB;
returnrgb;
}
</script>
</head>
<body>
<canvasid="W3Cfuns_canvas"width="400"height="300"></canvas>
</body>
</html>

</p>
每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5viewport的使用能帮你做到这一点……

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

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

只看该作者 · 发表于 2015-1-25 16:09:17

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-2-3 11:21:44

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

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

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-2-26 11:23:41

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-8 14:15:46

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-3-16 04:05:18

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

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

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

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

[HTML5] 带来一篇HTML5实例教程:Canvas标签坐标变更与路径分离

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

相关帖子