摘要：
原文来自林伟健个人博客继续上个笔记继续更新笔者的学习笔记，上几个笔记链接：html5Canvas学习笔记(1)矩形html5Canvas学习笔记(2)圆形html5Canvas学习笔记(3)直线曲线今天笔者来说一下坐标变换，说起坐标变换，童鞋们可能想起数学，没错，综合前几个笔记来看，其实任何关于绘画的，都会涉及到数学，包括一些复杂的图像界面，甚至是3d立体图形，都是由一罗列精密的数学运算而成。说会坐标变换，应该都不会陌生，因此可能童鞋们猜到了，它涉及到几种变换：平移，缩放和旋转。1.平移translate(x,y)-用来移动 canvas 和它的原点到一个不同的位置x是左右偏移量，y 是上下偏 阅读全文
posted @ 2012-10-23 11:11
林伟健前端博客
阅读(194)
评论(0)
推荐(0)
摘要：
原文来自林伟健个人博客接着上2个笔记，笔者今天继续更新自己的学习笔记。如要看上2个笔记内容，可看：html5Canvas学习笔记(1)矩形html5Canvas学习笔记(2)圆形直线和曲线涉及点不多，都是在路径创建的情况下使用。直线moveTo(x,y)//把当前点移动到指定的坐标x、y点上lineTo(x,y)//和moveTo有点类似，也是把点移动到指定点，但是它还会把开始点和结束点连接起来，绘制一条直线利用这2个函数，我们可以画出各图案，好像五角星之类，笔者在这里花了一个六芒星，就是用上面2个函数画出来的： 1 <!DOCTYPE html> 2 <html> 3 阅读全文
posted @ 2012-10-23 11:09
林伟健前端博客
阅读(255)
评论(0)
推荐(0)
摘要：
原文来自林伟健个人博客接着上个笔记内容《html5Canvas学习笔记(1)矩形》接着讲，这里讲到的是圆形圆形与矩形相比，圆形相对复杂一点，它还需要创建路径，而且每次结束后需要关闭路径。第一步：在获取图形上下文后，要先创建路径： cx.beginPath();//创建路径第二步：圆形函数： cx.arc(x,y,r,start,end,anticlockwise);//圆形这里的参数：x和y和矩形一样，都是代表距离原点的距离，r是圆形的半径，start和end代表圆形开始的角度和结束的角度，anticlockwise代表是否逆时针画圆，true代表是逆时针，false代表是顺时针。第三步：关闭 阅读全文
posted @ 2012-10-23 11:04
林伟健前端博客
阅读(193)
评论(0)
推荐(0)
摘要：
原文来自林伟健个人博客笔者最近在学习html5的有关知识，学习到了Canvas画布部分，这部分内容相当有趣，使用画布可以在浏览器画出各种各样的图案。今天，笔者学习了3种类型矩形、圆形、直线的画法,现在这里讲一下矩形在画图案前，先要获取对象：1 var canvas=document.getElementById('canvas');2 if(canvas==undefined){3 return false;4 }5 var cx=canvas.getContext('2d');当然还有几个属性要知道的： cx.fillStyle=”Red”;//代表将要填充的 阅读全文
posted @ 2012-10-23 11:02
林伟健前端博客
阅读(136)
评论(0)
推荐(0)
摘要：
原文来自林伟健个人博客好吧，笔者最近学html5的画布有点津津乐道，总体学习完canvas后，笔者尝试做了个小游戏-《贪食蛇》，下面来讲讲整个游戏的制作流程，关于之前的学习笔记，笔者在稍后会继续更新，有需要的童鞋可以关注下（打打广告= =）：好，先放出演示效果：[点击查看演示效果]贪食蛇需要实现的功能：1.一段时间生成“豆子”2.贪食蛇吃“豆”并变长3.贪食蛇撞墙或者撞到自己身体结束游戏4.贪食蛇积分到一个阶段升级并加快移动速度5.游戏结束重新开始玩过贪食蛇游戏（应该没人没玩过吧）的童鞋都知道有这些功能，针对这些功能，有几个比较核心的问题需要先整理好头绪才能开始制作我们的游戏。贪食蛇核心问题： 阅读全文
posted @ 2012-10-23 10:47
林伟健前端博客
阅读(228)
评论(0)
推荐(0)
浙公网安备 33010602011771号