仓酷云

标题: 来讲讲：HTML5教程：Canvas标签绘制坐标变更图形 [打印本页]

作者: 分手快乐 时间: 2015-1-15 23:11
标题: 来讲讲：HTML5教程：Canvas标签绘制坐标变更图形
每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5viewport的使用能帮你做到这一点……破洛洛文章简介：HTML5逐日一练之Canvas标签的使用-绘制坐标变更图形.
绘制图形的时分，我们大概常常会想到扭转图形，大概对图形利用变形处置，利用CanvasAPI的坐标轴变更处置功效，就可以完成这类效果。

在盘算机上绘制图形的时分，是以坐标点为基准来举行绘制的，默许情形下Canvas画布的最左上角对应于坐标轴的原点(0,0)。后面我们所讲的一切使用CanvasAPI绘制出来的图形都是以画布最左上交为坐标轴圆点，并以像素为单元来举行绘制的。

假如对这个坐标轴举行改动，那末就能够完成图形的变更处置了。对坐标的变更处置有以下三种体例：

平移
利用图形高低文工具的translate办法挪动坐标轴原点，该办法界说以下：

cantext.translate(x,y);

x:暗示横坐标，也就是将坐标轴x从原点向【左】挪动几个单元，默许以像素为单元
y:暗示纵坐标，也就是将坐标轴y从原点向【下】挪动几个单元，默许以像素为单元

扩展
利用图形高低文工具的scale办法将图形缩小，该办法的界说以下所示：
cantext.scale(x,y);

x:暗示横坐标，也就是【程度偏向】将图形缩小的倍数
y:暗示纵坐标，也就是【垂直偏向】将图形缩小的倍数
注：将图形减少的时分，将这两个参数设置为0-1之间的小数就能够了，好比，0.5暗示将图形减少一半。

扭转
利用图形高低文工具的rotate办法将图形举行扭转，该办法的界说以下所示：
cantext.rotate(angle);

angle：是指扭转的角度，扭转的中央点是坐标轴的原点。扭转偏向为顺时针举行，要想逆方扭转，只必要设置为正数便可。

上面的案例，就是利用这三种坐标变更体例配合完成的下图效果：
<!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");
context.fillStyle="#d4d4d4";
context.fillRect(0,0,400,300);
//绘制图形
context.translate(200,25);
context.fillStyle="rgba(0,0,255,0.25)";
for(vari=0;i<50;i++)
{
context.translate(25,25);
context.scale(0.95,0.95);
context.rotate(Math.PI/10);
context.fillRect(0,0,100,50);
}
}
</script>
</head>
<body>
<canvasid="W3Cfuns_canvas"width="600"height="400"></canvas>
</body>
</html>

</p>
在W3C的HTML工作小组电子邮件论坛上频频冒出这样的情绪化批判字眼：“幼稚”、“令人无法忍受”、“荒谬”、“使诈”等。

作者: 愤怒的大鸟 时间: 2015-1-17 20:30
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 小妖女 时间: 2015-1-25 16:09
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 老尸 时间: 2015-2-3 11:22
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 飘飘悠悠 时间: 2015-2-26 11:24
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

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

作者: 山那边是海 时间: 2015-3-16 04:17
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 活着的死人 时间: 2015-3-22 20:20
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

欢迎光临仓酷云 (http://ckuyun.com/)