本人是在校学生，由于这段时间不知道怎么回事，心情比较无聊没有事干，所以利用这段时间学一下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. Oracle安装时忘记解锁scott用户的解决方案

    最近笔者开始学习Oracle,对于笔者同学安装过程出现各种问题而导致重做系统表示默哀. (1)问题1:64位操作系统安装完以后选择java.exe文件后.sqldeveloper闪退,原因是64位操作 ...

  2. Day9 网络编程

    OSI(Open System Interconnect),即开放式系统互联. ISO(International Standards Organization)国际标准化组织 OSI七层模型: TC ...

  3. 关于 jquery.showLoading 中 出现的 图标不在页面中间的问题

    很多人喜欢 showLoading   因为 这个实在是太简单了直接 showLoading() hideLoading() 就可以解决这个问题. 今天我们就来看一下  这个插件里面的一个错误 或者说 ...

  4. Intel项目Java小记

    cannot be cast to javax.servlet.Filter添加provided即可 install -X是什么意思? Unsupported major.minor version ...

  5. JavaScript 排序算法——快速排序

    常见排序 javaScript 实现的常见排序算法有:冒泡排序.选择排序.插入排序.谢尔排序.快速排序(递归).快速排序(堆栈).归并排序.堆排序. 过程 "快速排序"的思想很简单 ...

  6. activemq启动不起来，报错Address already in use: JVM_Bind

    之前莫名其妙的activemq怎么都启动不起来后来多方查询是因为widows 的ICS服务. 解决方案是,我的电脑上邮件,选择服务,然后在服务中找到Internet Connection Sharin ...

  7. ubuntu maven 安装 设置

    http://blog.csdn.net/tiefanhe/article/details/9774189 1.安装 maven ,下载地址:http://maven.apache.org/downl ...

  8. Java多线程初学者指南（6）：慎重使用volatile关键字

    volatile关键字相信了解Java多线程的读者都很清楚它的作用,和sychnorized 一样用于多线程的同步.volatile关键字用于声明简单类型变量,如int.float.boolean等数 ...

  9. 算法练习之：Biorhythms

    Biorhythms Time Limit: 1000MS Memory Limit: 10000KB  Problem Description Some people believe that th ...

  10. 【codeforce 219D】 Choosing Capital for Treeland （树形DP）

    Choosing Capital for Treeland Description The country Treeland consists of n cities, some pairs of t ...