本人是在校学生，由于这段时间不知道怎么回事，心情比较无聊没有事干，所以利用这段时间学一下HTML5,发博客的目的是为了以后可以查询，也希望各位大神能够指导像我们这样的菜鸟，告别菜鸟的时段

　 我学东西时候有一个习惯，就是把已学知识做一个东西出来，这样可以提高兴趣，于是想起XNA 的游戏结构，想通过这个结构用HTML 写一个游戏引擎，本人是菜鸟 不要指望我有多么厉害

　　首先我们必须掌握HTML5的一些基本知识，：

　　canvas: 在HTML5中新增的元素，他相当与游戏中的场景或者画布，想这样编程方面的东西 代码 胜过文语

　　

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="NANF.js"></script>

    <script type="text/javascript">

        $$(function(){

            //得到canvas元素

            var c=document.getElementById("myCanvas");

            //得到画布

            var ctx= c.getContext("2d");

            //擦除画布

            ctx.clearRect(0,0,400,400);

            ctx.fillStyle="red";

            ctx.fillRect(20,20,75,50);

            //这里处理两个矩形谁在上， source-over 原矩形在上

            ctx.globalCompositeOperation="source-over";

            ctx.fillStyle="blue";

            ctx.fillRect(50,50,75,50);

            ctx.globalCompositeOperation="destination-over";

            ctx.fillStyle="yellow";

            ctx.fillRect(30,30,75,50);

            // destination-over 目标矩形在上

            ctx.globalCompositeOperation="destination-over";

            var img=new Image();

            img.src="jian.png";

           //画图

            ctx.drawImage(img,0,0,200,200);

        });

    </script>

</head>

<body onload="">

   <canvas id="myCanvas"></canvas>

</body>

</html>

上面的代码有一个地方要搞清楚  ctx.globalCompositeOperation="source-over";    各个画东西相交处的处理方式，更多地方

参考HTML5  w3c 文档

下面要讲到的是一张图片的切片：

大家有没有注意 动画的基本原理是一系列图片组成的。。而这些图片都在一张图片上，通过切片的方式 ，可以循环画出指定动作的图片，这里就不用代码演示了，说一下函数就行了

ctx.drawImage(image,sourceX,sourceY,sourceWidth,sourceHeigh,dwX,dwY,dwWidth,dwHeigth);

image: 是一个图片对象

sourceX，sourceY，sourceWidth，sourceHeigh,这四个参数在图片上指定一个区域，画的时候就画那个区域

dwX,dwY:这画布上指定 x 轴 和 y 轴

dwWidth ， dwHeigth ：图片上指定一个区域图片 画在 画布上宽高

最后我们介绍一下图片变形

ctx.translate(x,y)  : 这是平移函数

ctx.rotate(Ang) :  按弧度旋转

ctx.scale(x,y)  :   按x,y 方向进行缩放

上面这些 函数 学了一下Gui 的人都知道。。。。。我就不过多的解释了，不过下面介绍的函数我会贴出代码来,因为是做游戏的核心。

是否大家玩游戏的时候有没有注意到 （天龙八部，斗战神）  瀑布的水，河里的水 他们的流动好逼真，用上面的一个函数是很难做到的，所以我们要根据顶点来画图。 有没有有人知道游戏的基元是三角型，三角型有三个顶点 正好组成一个面 ，如果不清楚的可以问度娘和谷爸，废话就不多说了

ctx.createPattern(image,"repeat-y"); 为贴图图像创建一个模式 ；更多内容点击这里

代码：

<!DOCTYPE html>

<meta charset="utf-8">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="NANF.js"></script>

    <script type="text/javascript">

        $$(function(){

            //得到canvas元素

            var c=document.getElementById("myCanvas");

            //得到画布

            var context= c.getContext("2d");

            //擦除画布

            var image=new Image();

            image.src="hello.jpg";

            var imgPattern=context.createPattern(image,"repeat-y");

            //重置路径

            context.beginPath();

            //设置绘制句柄

            context.fillStyle=imgPattern;

            //绘制路线,第一个点

            context.moveTo(50,50);

            context.lineTo(60,500);

            context.lineTo(400,400);

            //绘制路径第四个点

            context.lineTo(500,50);

            context.closePath();

            context.fill();

            //结束路径

            context.closePath();

        });

    </script>

</head>

<body onload="">

   <canvas width="1366" height="768" id="myCanvas"></canvas>

</body>

</html>

在绘制路径中可以指定三个点  和 四个顶点 ,对于更多点我试了一次 ，有点不是我想要的结果，我想应该不可以

而下面我要介绍的函数等同于translate，rotate，scale  ,他就是:

context.transform(a,b,c,d,e,f)  绘制一个矩形；通过 transform添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 transform时，它都会在前一个变换矩阵上构建 ,更多内容点击这里

好了。。。所学的东西总结到这里

　　

HTML5 简单画图,切片,变形的更多相关文章

  1. jmGraph：一个基于html5的简单画图组件

    jmGraph:一个基于html5的简单画图组件 特性: 代码书写简单易理解 面向对象的代码结构 对图形控件化 样式抽离 模块化:入seajs实现模块化开发 兼容性:暂只推荐支持html5的浏览器:i ...

  2. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  3. html5 简单音乐播放器

    html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  4. HTML5简单入门系列（五）

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

  5. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  6. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  7. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  8. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  9. HTML5 Canvas 画图组件 All In One

    HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...

随机推荐

  1. 【转载】db blocks gets & consistent gets

    LOGIC IO(逻辑读次数)= db block gets + consistent gets consistent get : 在一致读模式下所读的快数,包括从回滚段读的快数. db block ...

  2. WARNING L15: MULTIPLE CALL TO SEGMENT

    原网页:http://www.cnblogs.com/CuriosityWzk/archive/2011/12/25/2301090.html WARNING L15: MULTIPLE CALL T ...

  3. android中LayoutInflater详解与使用

    android的LayoutInflater用来得到一个布局文件,也就是xxx.xml,而我们常用的findviewbyid是用来取得布局文件里的控件或都布局.inflater即为填充的意思,也就是说 ...

  4. （00）Java编程思想开篇立言。

    从今天开始,在相当长的时间中我在看Java编程思想.也把这个博客作为开始.这就是一个读书的笔记.

  5. IntelliJ 一键添加双引号

    IntelliJ IDEA(目前最新版本为2016.2.5) 不直接支持一键向选取内容添加双引号,但可以通过配置 Live Template 实现此功能. 以下为配置方法(针对2016.2.5版,其它 ...

  6. BZOJ 3707: 圈地 计算几何

    Description 2维平面上有n个木桩,黄学长有一次圈地的机会并得到圈到的土地,为了体现他的高风亮节,他要使他圈到的土地面积尽量小.圈地需要圈一个至少3个点的多边形,多边形的顶点就是一个木桩,圈 ...

  7. Python Web 性能和压力测试 multi-mechanize

    http://www.aikaiyuan.com/5318.html 对Web服务做Performance & Load测试,最常见的工具有Apache Benchmark俗称ab和商用工具L ...

  8. 【Xamarin挖墙脚系列：Xamarin.IOS的程序的结构】

    原文:[Xamarin挖墙脚系列:Xamarin.IOS的程序的结构] 开始熟悉Xamarin在开发IOS的结构!!!!!!! 先看官方 这个是以一个单页面的程序进行讲述的. 1 程序引用的程序集,核 ...

  9. Excel数据链接取消

    Excel数据链接取消 2013-9-14 学校里弄来学生的成绩单,想去掉原来高一的学号,但是一删除,后面的成绩数据就一同消失,如以下两图对比所示. 删除第一列前 删除第一列后 此问题不知道怎么描述, ...

  10. jquery 提示插件 cluetip

    jquery的 插件cluetip, 地址下载是:plugins.learningjquery.com/cluetip/demo/ 下面简单讲解下用法: 1 首先当然要放JQUERY的基本JS,和这个 ...