![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
文章平均质量分 73
Sam走起
这个作者很懒,什么都没留下…
展开
-
【初识HTML5】(2) : 绘画的原理
在《画布》一文中,我们已经初步认识了HTML5 的canvas, 今天我们就要来聊聊如何画画了。在画画之前,我们必须要先认识一个东东:The Coordinate System 坐标系统:如下图所示:相信大家还记得我们之前提到过绘画平面的默认大小是300px*150px吗?恩,相信大家对坐标轴不会陌生,这里大家要注意,坐标的位置不会固定,因为你可以通过Translate, Ro原创 2015-02-10 16:29:54 · 549 阅读 · 0 评论 -
【初识HTML5】(1) : 什么是画布
开宗明义:本人不是大牛,纯粹为了兴趣和大家分享,如果有错误的地方还望大牛不吝指正。正如摄影是用光影作画,HTML5则是用代码作画。既然是作画,那我们就首先要聊聊HTML5里面最基础的东东:画布。因为本人不是大牛,无法给出很深奥的底层理论,那咱们就实际点,直接拿来用吧。原创 2015-02-10 11:54:08 · 734 阅读 · 0 评论 -
【初识HTML5】(5) : 动画
动画无非的就是触发动画、循环动画、控制时间。 我们可能最先想到的是:setInterval() setTimeout()诚然,以上两个命令确实可以起到触发动画、循环动画、控制时间的作用,但是不准确。因为浏览器比你更清楚什么时候执行动画命令。所以说,与其你告诉浏览器不如让浏览器告诉你TA什么时候已经准备好执行下一个命令了。 从根本上来说,以上两条命令的问题在于他们不知道什么时候该做什么事情。我们想原创 2015-02-25 12:27:35 · 464 阅读 · 0 评论 -
【初识HTML5】(3) : 画布常用的API (1)
本文申明:为了节省时间,Sam偷了个小懒, 大部分例子来源网络,主要是为了方便演示。1.矩形相关clearRect(double x, double y, double w, double h) 清除指定方形区域的像素 x 要清除的矩形左上角的 x 坐标 y 要清除的矩形左上角的 y 坐标 w 要清除的矩形的宽度,以像素计 h要清除的矩形的高度,以像素计<script>var原创 2015-02-12 12:12:06 · 691 阅读 · 0 评论 -
【初识HTML5】(3) : 画布常用的API (2)
5.路径、描边、填充到目前为止,我们讨论过所见即所得的方法只有两个strokeRect() 和fillRect()。但是在实际的设计中,我们不可能都是一笔到底的,比如AI ,我们都是运用路径在作画,因此,在HTML5中,我们同样也是有基于路径的方法。还是先看一段代码吧;....................................................context.font原创 2015-02-13 16:18:26 · 646 阅读 · 0 评论 -
【初识HTML5】(4) : 图像
HTML5提供了大量的方法来画图以及操作图像数据。直奔主题吧~1.画图方法的3种不同的参数var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), image = new Image();image.src = 'fence.png';image.onload = func原创 2015-02-16 15:46:49 · 685 阅读 · 0 评论 -
【初识HTML5】(3) : 画布常用的API (3)
我们把其他的常用API一起GO OVER一下吧。6.曲线相关arcTo(double x1, double y1,double x2, double y2, double radius)使用使用切点和一个半径,来为当前子路径添加一条圆弧。x1, y1 点 P1 的坐标。 x2, y2 点 P2 的坐标。 radius 定义圆弧的圆的半径。var canvas = document.getE原创 2015-02-15 12:18:28 · 428 阅读 · 0 评论