本人是在校学生，由于这段时间不知道怎么回事，心情比较无聊没有事干，所以利用这段时间学一下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. 《工作型PPT设计之道》培训心得

    参加包翔老师的“工作型PPT设计之道>培训,颇多心得,后来为部门新员工和同组同事做了转化培训,将心得整理成一份PPT讲义,效果颇佳.现将主要心得整理于此.因时间仓促,24条心得有拼凑之嫌,有待今 ...

  2. Android Context创建过程

        特定的资源或者类构成了Android应用程序的运行上下文环境 PackageManager, ClassLoader, Assert等等 Android应用程序窗口的运行上下文环境是通过Con ...

  3. Python学习笔记——正则表达式入门

    # 本文对正则知识不做详细解释,仅作入门级的正则知识目录. 正则表达式的强大早有耳闻,大一时参加一次选拔考试,题目就是用做个HTML解析器,正则的优势表现得淋漓尽致.题外话不多讲,直接上干货: 1. ...

  4. 单片微机原理P0：80C51结构原理

    本来我真的不想让51的东西出现在我的博客上的,因为51这种东西真的太low了,学了最多就所谓的垃圾科创利用一下,但是想一下这门课我也要考试,还是写一点东西顺便放博客上吧. 这一系列主要参考<单片 ...

  5. 理解和熟练运用js中的call及apply

    call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向. 因为 JavaScript 的函数存在「定义时上下文」和 ...

  6. Codeforces Round #197 (Div. 2) : D

    这题也是一个线段树的水题: 不过开始题目没看明白,害得我敲了一个好复杂的程序.蛋疼啊.... 最后十几分钟的时候突然领悟到了题意,但是还是漏掉一个细节,老是过不去... 以后比赛的时候不喝啤酒了,再也 ...

  7. 在openshift上自定义node.js的版本

    https://github.com/ramr/nodejs-custom-version-openshift 由于是线上服务器,一步一步来: 先把上面的工程拉下来,覆盖到初始化的工程里,提交,让服务 ...

  8. Linux find命令详解

    转自Linux find命令详解 一.find 命令格式 1.find命令的一般形式为: find pathname -options [-print -exec -ok ...] 2.find命令的 ...

  9. 3D触控简介：建立数字刻度应用及快速活动栏

    苹果公司通过 iPhone 6s 和 6s Plus 引入了与手机互动的全新方式:按压手势.你也许知道,苹果智能手表和苹果笔记本电脑早已具备这一功能,只是名称略有不同,为力感触控(Force Touc ...

  10. 高远介绍的好东东--django-celery

    终于可以到异步消息机制的高档产品啦~~~ 不知能不能代替AJAX.. 参照官方文档试下: 中文文档: http://docs.jinkan.org/docs/celery/getting-starte ...