Canvas入门－利用Canvas绘制好玩的电子时钟

在这之前你需要了解一下方法的使用：beginPath()closePath()moveTo()lineTo()fill()stroke()fillRect()clearRect()这些我在前面的文章介绍过，可以看：canvas入门－利用 canvas 制作一个七巧板画个圆arc()方法arc(x, y, radius, startAngle, endAngle, antic

业界 2016年07月21日

《每周一点canvas动画》——桌球运动(1)

每周一点canvas动画代码文件一本好的技术书籍往往都是由浅入深，本系列文章基本上也遵循这个原理。在上一章中我们介绍了高级的坐标旋转，并且通过它，我们实现了任意角度的碰撞反弹效果，它让物体与非水平和非垂直的面产生合乎情理的碰撞成为了可能。那么在本章我们继续深入的介绍另一个问题——物体与物体发生碰撞后应该如何处理？也许你会说，在前面的章节中我们不是已经介绍过物体与物体之间的碰

业界 2016年07月16日

Canvas入门－利用Canvas画国旗

在这之前需要你懂得以下方法的使用：beginPath()moveTo()lineTo()closePath()具体用法可以参考我的上一篇文章 canvas入门－利用canvas制作一个七巧板矩形的绘制canvas提供了三种绘制矩形的方法：fillRect(x, y, width, height)绘制一个填充的矩形strokeRect(x, y, width, height)

业界 2016年07月17日

从零开始开发一款H5小游戏(三) 攻守阵营，赋予粒子新的生命

本系列文章对应游戏代码已开源 Sinuous game。每个游戏都会包含场景和角色。要实现一个游戏角色，就要清楚角色在场景中的位置，以及它的运动规律，并能通过数学表达式表现出来。场景坐标canvas 2d的场景坐标系采用平面笛卡尔坐标系统，左上角为原点(0,0)，向右为x轴正方向，向下为y轴正方向，坐标系统的1个单位相当于屏幕的1个像素。这对我们进行角色定位至关重要。Ene

业界 2016年07月14日

从零开始开发一款H5小游戏(一) 重温canvas的基础用法

本系列文章对应游戏代码已开源 Sinuous game。初衷从萌发写一个小游戏的想法到完成游戏开发用了大概一周的业余时间。这个过程积累了一些经验，也算是参透了一些游戏开发的原理。在这里打算写一个系列教程，讲述怎样从零开始开发一款小游戏。让新者少走弯路，快速入手。也能让自己总结反思，发现问题。在开始介绍如何写游戏前有必要重温一下canvas。它是本游戏的地基，建房子要快，首先

业界 2016年07月14日

《每周一点canvas动画》——碰撞检测(2)

每周一点canvas动画代码文件如果你的画布上只有两个物体，那么他们之间的碰撞检测很容易就能实现。但是，当物体越来越多，你就需要一些必要的策略去检测物体之间的碰撞，不能漏掉任何的可能性，同时还要考虑性能问题，避免重复检测。上一节我们介绍了物体间的碰撞检测方法。在这一节我们主要介绍：多物体碰撞检测策略高级碰撞检测方法总结1. 多物体碰撞检测策略现在我们来简单分析一下多个物体之

业界 2016年06月26日

《每周一点canvas动画》——坐标旋转

每周一点canvas动画代码文件在上一节中我们介绍了一些碰撞检测的方法。这一节本来打算讲解一个基于距离碰撞检测的小游戏。但是，因为最近比较忙，一直没来的及把游戏的整个过程完整的写出来。所以，这一节我们继续介绍下一项新技术——坐标旋转，它可能相对枯燥一些，而且有一些大家十分讨厌的数学公式。但是，它是我们后面高级动画的基石。所以，看的时候还请耐心一点，关于碰撞检测的游戏示例，我

业界 2016年07月14日

canvas 入门－利用 canvas 制作一个七巧板

简介是 HTML5 新增的元素之一，它允许脚本语言动态渲染位图像。最初是由 Apple 引入，用于 Mac OS X 的仪表盘，后来又在 Safiri 和 Google Chrome 中被实现。 就像个神奇的画布，你可以在上面画出你想要的绚丽的效果。使用元素之前，需要一些基本的 HTML 和 Javascript 知识。 元素不被一些老的浏览器支持，但是主流的高级浏览器都

业界 2016年07月13日

Canvas基础知识

Canvas创建canvas一般都要存在IDwidth和height建议直接在中直接设定，不要使用css的方式去设定长和高，并且其是没有px单位的，因其也表示精度width和height还可以使用JS的方式进行设定，在Element对象中存在width和height属性，可以进行设定获取Canvas对象var canvas=document.getElementById("

业界 2016年07月12日

模拟黑客帝国效果2（canvas实验）

之前看到一个css和js应用的效果练了一下，演示： 这次用canvas玩一下，感觉也还不错， Github传送门：https://github.com/EchoLsx/hacker 演示地址：http://codepen.io/echo_lsx/pen/ZOaOyZ/*Javascript代码片段*/var c = document.getElementById("c");

业界 2016年07月12日