本人是在校学生，由于这段时间不知道怎么回事，心情比较无聊没有事干，所以利用这段时间学一下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. JBPM4 常用表结构及其说明

    本文从表结构.操作时表的变化以及jbpm4.4各个包的作用来介绍jbpm的. 第一部分:表结构说明 Jbpm4 共有18张表,如下,其中红色的表为经常使用的表   一:资源库与运行时表结构 1.  J ...

  2. Python的简介以及安装和第一个程序以及用法

    Python的简介: 1.Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.自从20世纪90年代初Python语言诞生至今,它逐渐被广泛应用于处理系统管理任务和Web编程.Pytho ...

  3. ACM竞赛常用STL（二）之STL--algorithm

    <algorithm>无疑是STL 中最大的一个头文件,它是由一大堆模板函数组成的.下面列举出<algorithm>中的模板函数: adjacent_find / binary ...

  4. C语言中调用Lua

    C语言和Lua天生有两大隔阂: 一.C语言是静态数据类型,Lua是动态数据类型 二.C语言需要程序员管理内存,Lua自动管理内存 为了跨越世俗走到一起,肯定需要解决方案. 解决第一点看上去比较容易,C ...

  5. 【转】ant命令总结

    http://feiyeguohai.iteye.com/blog/1295922 ant命令总结 1 Ant是什么?  Apache Ant 是一个基于 Java的生成工具. 生成工具在软件开发中用 ...

  6. AFNetworking的原理与基本使用－b

    全称是AFNetworking 虽然运行效率没有ASI高,但是使用比ASI简单 是对NSURLConnection和NSURLSession的各自的一层包装 AFN的内部中的RunLoop AFN内部 ...

  7. Central Europe Regional Contest 2012 Problem c: Chemist’s vows

    字符串处理的题目: 学习了一下string类的一些用法: 这个代码花的时间很长,其实可以更加优化: 代码: #include<iostream> #include<string> ...

  8. WAF

    http://netsecurity.51cto.com/art/201010/231124.htm http://wenku.baidu.com/link?url=elrFtxPRcwJ5FjlXE ...

  9. [wikioi]多源最短路

    http://wikioi.com/problem/1077/ Floyd算法.精华是三层循环,if (dist(i,k) + dist(k,j) < dist(i,j)) then dist( ...

  10. CollapsingToolbarLayout

    CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在Collapsin ...