HTML5 简单画图,切片,变形

最新推荐文章于 2024-05-30 11:27:58 发布

a83982451

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量363

点赞数

文章标签： javascript 游戏 ViewUI

原文链接：http://www.cnblogs.com/xuehaiyiye/p/3486200.html

版权

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

View Code

上面的代码有一个地方要搞清楚 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>

View Code

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

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

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

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

转载于:https://www.cnblogs.com/xuehaiyiye/p/3486200.html

a83982451

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 简单画图,切片,变形

　　本人是在校学生，由于这段时间不知道怎么回事，心情比较无聊没有事干，所以利用这段时间学一下HTML5,发博客的目的是为了以后可以查询，也希望各位大神能够指导像我们这样的菜鸟，告别菜鸟的时段　我学东西时候有一个习惯，就是把已学知识做一个东西出来，这样可以提高兴趣，于是想起XNA 的游戏结构，想通过这个结构用HTML 写一个游戏引擎，本人是菜鸟不要指望我有多么厉害　　首先我们必...
复制链接

扫一扫