HTML5 简单画图,切片,变形

　　本人是在校学生，由于这段时间不知道怎么回事，心情比较无聊没有事干，所以利用这段时间学一下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 简单画图,切片,变形的更多相关文章

jmGraph：一个基于html5的简单画图组件
jmGraph:一个基于html5的简单画图组件特性: 代码书写简单易理解面向对象的代码结构对图形控件化样式抽离模块化:入seajs实现模块化开发兼容性:暂只推荐支持html5的浏览器:i ...
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
html5 简单音乐播放器
html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
HTML5简单入门系列（五）
前言本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...
html5 Canvas画图3：1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程上次我们讲到,canvas有时候会 ...
html5 canvas 画图移动端出现锯齿毛边的解决方法
使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
HTML5 Canvas画图与动画学习59例
HTML5 Canvas画图与动画学习59例学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例
HTML5 Canvas 画图入门
HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...
HTML5 Canvas 画图组件 All In One
HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...

随机推荐

Python全栈开发之 Mysql (一)
一: 1.什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库别说我们在写程序的时候创建的database就是一个数据库 2.什么是 MySQL.Oracle.SQLi ...
Swift(二,元组,可选类型,类型转化)
一,首先,元组是Swift中特有的,OC中没有元组相关类型,具体怎么用,看下面的例子吧 //1.使用元组来定义一组数据 let infoTuple = (,1.8) let nameTuple = i ...
zzuli oj 1145 有问题的里程表 2
Description 某辆汽车有一个里程表,该里程表可以显示一个整数,为该车走过的公里数.然而这个里程表有个毛病:它总是从3变到5,而跳过数字4,里程表所有位(个位. 十位.百位等)上的数字都是如此 ...
由 OR 引起的死循环
在客商迁移测试时,程序一旦开始执行就不能自动停止.只能通过手动中断应用服务器的进程来停止.检查迁移的一个表,这个表迁移前没有数据,迁移最多会插入3w条左右数据,但是迁移过程执行2个多小时候再看,已经有 ...
C图书借还示例
以后要搞C了先自己练习一下,系统本身没有太大的实际用途,只是用来磨练编程规范,不足之处还望大家多多指正 .互相交流共同进步. 为了方便只使用了一个 book.c 文件,在vc6 下编译通过,其他编译器 ...
浅谈JavaScript的push()函数
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度.返回值是把指定的值添加到数组后的新长度. 语法:arrayObject.push(newelement1,newelement2,. ...
LibLinear（SVM包）的MATLAB安装
LibLinear(SVM包)的MATLAB安装 1 LIBSVM介绍 LIBSVM是众所周知的支持向量机分类工具包(一些支持向量机(SVM)的开源代码库的链接及其简介),运用方便简单,其中的核函数( ...
hdu 4752
计算几何+数值计算的题目: 要用到辛普森积分,没有学过~~~ 参考学习了acm_Naruto大神的代码! 代码: #include<cstdio> #include<cmath&g ...
Windows XP系统安装SQL Server 2005(开发版)图解
转自Windows XP系统安装SQL Server 2005(开发版)图解安装前提:由于有些从网上的下载的项目需要导入SQL Server 2005的数据文件,因此,今天便安装了这个数据库,我的系 ...
Ubuntu配置apache
http://blog.csdn.net/ljchlx/article/details/21978431 http://www.2cto.com/os/201110/107283.html

HTML5 简单画图,切片,变形

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

随机推荐

热门专题