跟KingDZ学HTML5之七 探究Canvas之各种特效

初看到题目大家怎么个反应啊,哇塞,这么多啊,可是看完这节课程之后,你会发现这些功能不过如此。

1》移动  translate(x, y)

简单的说明一下 ,X  左右偏移量   Y  上下偏移量

说白了,就是说,假如原先的坐标在 (0,0) 那么 使用 translate(100,100) 之后,坐标就到 (100,100)这个点了 。

然后,我们首先呢,我先写个  “王”  哈哈,俺的姓。

效果图

哈哈。

大家可以看到,这是的坐标是以(0,0)为原点的。下面我们就想办法,将他更改

function draw() {
            var c = document.getElementById(‘mycanvas‘);
            var cxt = c.getContext("2d");
            //cxt.save();
            cxt.translate(90, 0);
            cxt.moveTo(0, 0);
            cxt.lineTo(200, 0);
            cxt.moveTo(100, 0);
            cxt.lineTo(100, 200);
            //cxt.restore();
            cxt.moveTo(0, 100);
            cxt.lineTo(200, 100);
            cxt.moveTo(0, 200);
            cxt.lineTo(200, 200);
            cxt.lineWidth = 2;
            cxt.stroke();
        }

看到了吗?我们上面有一句       cxt.translate(90,0);

这个就是我们  移动了他的 原点,看效果。

发生移动了吧。呵呵。大家注意一下,上面的我注释掉的那两个 方法

//cxt.save();

//cxt.restore();

然后,你可以将注视打开,看一下效果,呵呵,神马效果,自己打开就知道了,俺在这就不解释了,虽然他们很常用,但是,大家自己去慢慢体会吧。

2》旋转 Rotating

rotate(angle) 

这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。【弧度怎么计算,呵呵,自己看前面的教程】

我们做出来这种效果。

function draw() {
            var c = document.getElementById(‘mycanvas‘);
            var cxt = c.getContext("2d");
            cxt.translate(100, 100);
            for (i = 1; i < 7; i++) {
                cxt.save();   //记住状态
                cxt.fillStyle = ‘rgb(‘ + (60 * i) + ‘,‘ + (200 - 60 * i) + ‘,25)‘;  //填充随机的颜色
                for (j = 0; j < i * 6; j++) {
                    cxt.rotate(Math.PI * 2 / (i * 6));    //旋转角度
                    cxt.beginPath();
                    cxt.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
                    cxt.fill();
                }
                cxt.restore();  // 还原状态
            }
        }

上面的这个例子啃个有点复杂了,下面我们实现一个相对比较简单的例子相信大家看到就知道  这个rotate 怎么用了 

function draw() {
            var c = document.getElementById("mycanvas");
            var ctx = c.getContext("2d");
            var rectWidth = 75;
            var rectHeight = 75;
            ctx.translate(c.width / 2, c.height / 2);
            ctx.rotate(Math.PI * 2 / 6);
            ctx.fillStyle = "red";
            ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
        }

这回应该好理解了吧,ctx.rotate(Math.PI * 2 / 6); 重点就是这角度的问题。

3》缩放 Scaling

scale(x, y)

scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。值比 1.0 小表示缩小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有。

function draw() {
            var c = document.getElementById("mycanvas");
            var ctx = c.getContext("2d");
            var rectWidth = 75;
            var rectHeight = 75;
            ctx.translate(c.width / 2, c.height / 2);
            ctx.scale(0.5, 0.5);
            ctx.fillStyle = "red";
            ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
        }

其实这个缩小,就是类似上面的那个 移动。只不过一个是位置,一个是形状。

时间: 2024-11-05 19:45:45

跟KingDZ学HTML5之七 探究Canvas之各种特效的相关文章

跟KingDZ学HTML5之五 探究Canvas之图像与文字

大家好,这节课咱们继续讲解 canvas 这个标签的一些常见的使用,呵呵,这个标签还是真的挺有用途的. 这节课程首先说明的是 如何才 canvas 中插入图像. canvas 插入图像的步骤:呵呵,又来了. 1.首先当然准备一张图片了. 2.用 drawImage 方法将图像插入到 canvas 中. drawImage 方法 有三种形态的参数可以选择 第一种: 我们先用最简单的方法写一个例子 drawImage(image, x, y) 其中 image 是 image 或者 canvas 对

跟KingDZ学HTML5之三 画布Canvas

继续更新我们的教程,哈哈,个人觉得 ,这个HTML5 的官方 LOGO  怎么看,怎么像变形金刚. 神马关系~~~~~~~~~~~ <Canvas> 是HTML5中新出现的一个元素.就是可以通过  JS绘制图形. 目前浏览器对 Canvas 的支持情况如下 IE FF Chrome Safari Opera IPhone Android 版本7.0以上 版本3.0以上 版本3.0以上 版本3.0以上 版本10.0以上 版本1.0以上 版本1.0以上 IE7 和  IE8  需要一个 第三方的

跟KingDZ学HTML5之四 继续探究Canvas之路径

哈哈,开始吧,这节课第一个内容是 路径.路径,顾名思义,就是俺拿着画笔,划线呗. 画图的几个步骤. 第一步:找个起点开始画图.----beginPath; 第二步 : 划线,画出自己想要的图像 . 第三步:完成图形,关闭路径. 当然也可以什么都不做,就是画一个点或者一条线   ----- closePath 第四步:填颜色. 哈哈,对不对啊,俺上小学,美术老师就是这么教的. 好了,先随便画一个图形吧.---画一条线,(*^__^*) 嘻嘻-- <script type="text/java

跟KingDZ学HTML5之八 HTML5之Web Save

好了,今天有事崭新的一天啊,经过前面几个课程的学习,我想大伙应该差不多已经可以写一些HTML5的应用了,Canvas 的用途太多了,我以后和大家慢慢的谈论,呵呵 弄不好,开个专题,也可以.(*^__^*) 嘻嘻--.好了开始我们今天的课程吧. 大家都应该知道 Cookies 这个东东哦,但是太郁闷了,他只有 4K  ?  真的啊,呵呵,要是工资底薪还可以..哈哈 这节课,俺说的这个和COOKIES 差不多.好了,废话不多说,我们讲课. HTML5 提供了两种在客户端存储数据的新方法: local

跟KingDZ学HTML5之九 HTML5新的 Input 种类

好了,我们这节课讲解的可能有些难以测试,因为目前很多浏览器都不支持,这些新增加的标签,我也只能,尽可能的去找支持的浏览器给大家测试展示效果. HTML5中新增加了很多  Input 的种类. 1.<input type="search">    查询文本框 2.<input type="number"> 数字文本框 3.<input type="range">     滑动条 4.<input type=

跟KingDZ学HTML5之十三 HTML5颜色选择器

这节课主要给大家展示两个实例,当然,都是灰常简单的. 首先是第一个效果,颜色选择器,这个效果如下 我想大家,很多人都做过其他版本的这个东东吧,对了,这次就是要在HTML5里面简单的实现一下 首先要做的就是准备工作了 <canvas id="text" width="100" height="100"></canvas> <p>Red: <input type="range" id=&q

跟KingDZ学HTML5之二 再见Audio和Video

呵呵,大家别见怪啊,这篇文章可不是和这两个标签 说BYE-BYE  而是,进一步的 运用这两个标签. 好了,我们这节课一开始,第一个例子,用JS控制  这两个标签,哦,对了,我之讲解一个了,这两个哥们的功能太像了,其他的大伙自己去理解吧. <! DOCTYPE HTML> <html> <head> <script type="text/javascript"> function Show() { var video = document

跟KingDZ学HTML5之十一 HTML5 Form 表单新元素

新的课程又开始,哈哈,最近的文章更新比较快,希望大家跟上俺的步伐啊,呵呵,但是每当看到阅读量,哎,还真不多,可是俺还要坚持写下去,不知道,大家是不是都没有在研究HTML5呢? 这节课程,讲的是 From 表单 新增加的几个新的元素,他和前面的两节课程 同属于一个范围,只不过长的比较特殊.所以就提炼出来了. 旁白:俺不是前端工程师啊,学习HTML5完全是因为,哈哈,这个东西太酷了.俺是正宗滴NET程序员 好了第一个出现的新元素是 datalist 哈哈,这个好解释了,前面我们已经使用过了. 还是用

跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性

这节课给大家补充一下,一些 前些课程没有接触的知识. 在XHTML中,表单内的从属元素必须书写在表单内部,但是在HTML5中,可以把他们书写在页面上任何地方,然后给元素制定一个form属性,属性值为该表单单位的id,这样就可以声明该元素从属于指定表单了. 这个我想对于我们来说,应该是个很新奇的玩意吧 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>form