HTML5游戏开发(三)

最新推荐文章于 2024-07-11 10:43:05 发布
最新推荐文章于 2024-07-11 10:43:05 发布
阅读量881 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MARQUIS888/article/details/79017933
版权

HTML5游戏开发(三)

一、绘制

（一）矩形绘制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>矩形绘制</title>
        <style>
            body {
                background: #FFCC99;
            }

            #canvas {
                background: #99CC99;
                border: thin solid #FFFFCC;
            }
        </style>
    </head>
    <body>
        <canvas id='canvas' width='600' height='400'>
    </canvas>
        <script src="js/rect.js"></script>
    </body>
</html>

js脚本：

var canvas = document.querySelector("#canvas"),
    context = canvas.getContext('2d');

//定义字体与大小
context.font="24px 隶书";
//文本内容
context.fillText("内容擦除",200,40);
//路径粗细  
context.lineWidth=10;
//路径样式miter(方) bevel(斜角) round(圆角)
context.lineJoin="round";
//绘制一个矩形
context.strokeRect(75,100,200,200);

//实心矩形
context.fillRect(90,150,50,50);

context.canvas.onmousedown=function(e){
    //清除画布
    context.clearRect(0,0,canvas.width,canvas.height);
}

(二)颜色与透明度

var canvas = document.querySelector("#canvas"),
    context = canvas.getContext('2d');

//定义字体与大小
context.font="24px 隶书";
//文本内容
context.fillText("内容擦除",200,40);
//路径粗细  
context.lineWidth=10;
//路径样式miter(方) bevel(斜角) round(圆角)
context.lineJoin="round";
//设置路径颜色
context.strokeStyle="#49868C";
//绘制一个矩形
context.strokeRect(75,100,200,200);
//设置填充颜色,R G B加透明色
context.fillStyle='rgba(168,21,43,0.1)';
//也可使用globalAlpha，设置透明度
//context.fillStyle='rgba(168,21,43)';
//context.globalAlpha=0.5;
//实心矩形
context.fillRect(90,150,50,50);

context.canvas.onmousedown=function(e){
    //清除画布
    context.clearRect(0,0,canvas.width,canvas.height);
}

显示效果：
image

(三)渐变色与图案

1、线性渐变

context.createLinearGradient(x0,y0,x1,y1);

参数描述
x0渐变开始点的 x 坐标
y0渐变开始点的 y 坐标
x1渐变结束点的 x 坐标
y1渐变结束点的 y 坐标
var canvas = document.querySelector("#canvas"),
    context = canvas.getContext('2d');

//定义字体与大小
context.font="24px 隶书";
//文本内容
context.fillText("线性渐变",230,40);
//创建线性渐变  x,y开始位置，后两个参数为结束位置
//从左上角开始渐变
// gradient = context.createLinearGradient(
//               0, 0,canvas.width, canvas.height);
//从左侧渐变
gradient = context.createLinearGradient(
                 0, canvas.height,canvas.width, canvas.height);
//设置渐变颜色  0~1之间的颜色停止点,表示渐变中开始与结束之间的位置
//在 0.0 到 1.0 之间的浮点值，表示渐变的开始点和结束点之间的一部分。
//offset 为 0 对应开始点，offset 为 1 对应结束点。
gradient.addColorStop(0,'red');
gradient.addColorStop(0.3,'green');
gradient.addColorStop(0.5,'blue');
gradient.addColorStop(0.4,'yellow');
gradient.addColorStop(0.2,'black');
//设置样式
context.fillStyle=gradient;
//绘制实心矩形
context.fillRect(20,120,300,200);

context.canvas.onmousedown=function(e){
    //清除画布
    context.clearRect(0,0,canvas.width,canvas.height);
}

显示效果：
image

2、放射渐变

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数描述
x0渐变的开始圆的 x 坐标
y0渐变的开始圆的 y 坐标
r0开始圆的半径
x1渐变的结束圆的 x 坐标
y1渐变的结束圆的 y 坐标
r1结束圆的半径
var canvas = document.querySelector("#canvas"),
    context = canvas.getContext('2d');

//定义字体与大小
context.font="24px 隶书";
//文本内容
context.fillText("放射渐变",230,40);
//创建放射渐变 
gradient = context.createRadialGradient(
                canvas.width/2, canvas.height,10,
                 canvas.width/2, 0, 100);
//设置渐变颜色  0~1之间的颜色停止点,表示渐变中开始与结束之间的位置
//在 0.0 到 1.0 之间的浮点值，表示渐变的开始点和结束点之间的一部分。
//offset 为 0 对应开始点，offset 为 1 对应结束点。
gradient.addColorStop(0,'red');
gradient.addColorStop(0.3,'green');
gradient.addColorStop(0.5,'blue');
gradient.addColorStop(0.4,'yellow');
gradient.addColorStop(0.2,'black');
//设置样式
context.fillStyle=gradient;
//绘制实心矩形
context.fillRect(0,100,canvas.width,canvas.height-100);

context.canvas.onmousedown=function(e){
    //清除画布
    context.clearRect(0,0,canvas.width,canvas.height);
}

显示效果：
image

3、图案

  除了颜色与渐变色，Canvas元素也允许使用图案来对图形和文本进行描边与填充。可以是以下三种之一：image元素、canvas元素和video元素。
可使用：
context.createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”);

参数描述
image规定要使用的图片、画布或视频元素。
repeat默认。该模式在水平和垂直方向重复。
repeat-x该模式只在水平方向重复。
repeat-y该模式只在垂直方向重复。
no-repeat 该模式只显示一次（不重复）。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图案</title>
    </head>
    <body>
        <style>
         #canvas {
            background: #eeeeee;
            border: thin solid cornflowerblue;
         }
         #radios {
            padding: 10px;
         }
      </style>
   </head>

   <body>
      <div id='radios'>
         <input type='radio' id='repeatRadio' name='patternRadio' checked/>重复
         <input type='radio' id='repeatXRadio' name='patternRadio'/>横向重复
         <input type='radio' id='repeatYRadio' name='patternRadio'/>纵向重复
         <input type='radio' id='noRepeatRadio' name='patternRadio'/>不重复
      </div>
        <canvas id="canvas" width="450" height="275">
        </canvas>
        <script type="text/javascript" src="js/pattern.js" ></script>
    </body>
</html>

JS脚本：

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    repeatRadio = document.getElementById('repeatRadio'),
    noRepeatRadio = document.getElementById('noRepeatRadio'),
    repeatXRadio = document.getElementById('repeatXRadio'),
    repeatYRadio = document.getElementById('repeatYRadio'),
    image = new Image();
    image.src="img/yin_yang_64px_1168759.png";

//图像加载事件
image.onload=function(){
    fillCanvasWithPattern("repeat");
}
//绘制图案    
function fillCanvasWithPattern(repeatString) {
   //创建图案对象
   var pattern = context.createPattern(image, repeatString);
   //清除背景
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.fillStyle = pattern;
   //进行绘制一个实心矩形
   context.fillRect(0, 0, canvas.width, canvas.height);
   context.fill();
};
/**
 * 事件添加
 * @param {Object} e
 */
repeatRadio.onclick = function (e) {
  fillCanvasWithPattern('repeat'); 
};

repeatXRadio.onclick = function (e) {
  fillCanvasWithPattern('repeat-x'); 
};

repeatYRadio.onclick = function (e) {
  fillCanvasWithPattern('repeat-y'); 
};

noRepeatRadio.onclick = function (e) {
  fillCanvasWithPattern('no-repeat'); 
};

显示效果：
iamge

(四)阴影

通过以下属性可以设置阴影：

参数描述
shadowColor设置或返回用于阴影的颜色
shadowBlur设置或返回用于阴影的模糊级别
shadowOffsetX设置或返回阴影距形状的水平距离
shadowOffsetY设置或返回阴影距形状的垂直距离
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>阴影绘制</title>
        <style>
            body {
                background: #FFCC99;
            }
            #canvas {
                background: #99CC99;
                border: thin solid #FFFFCC;
            }
        </style>
    </head>
    <body>
        <canvas id='canvas' width='600' height='400'>
    </canvas>
        <script src="js/shadow.js"></script>
    </body>
</html>

JS脚本

var canvas = document.querySelector("#canvas"),
    context = canvas.getContext("2d");

//设置阴影颜色
context.shadowColor="#2B334A";
//设置阴影的模糊级别
context.shadowBlur=20;
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.fillStyle="#6495ED";
context.fillRect(100,100,100,100);

显示效果：
iamge

(五)路径、描边与填充

方法描述
fill()填充当前绘图（路径）
stroke()绘制已定义的路径
beginPath()起始一条路径，或重置当前路径
moveTo()把路径移动到画布中的指定点，不创建线条
closePath()创建从当前点回到起始点的路径
lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>路径</title>
        <style>
            body {
                background: #283c3c;
            }
            #canvas {
                background: #282828;
                border: thin solid #FFFFCC;
            }
        </style>
    </head>
    <body>
        <canvas id='canvas' width='600' height='500'>
    </canvas>
        <script src="js/path.js"></script>
    </body>
</html>

JS脚本

var context=document.querySelector("#canvas").getContext("2d");

//路径颜色
context.strokeStyle="#6495ED";
context.fillStyle="#49868C";
context.lineWidth = '5';  

//路径
context.beginPath();
context.rect(50, 50, 150, 80);
context.stroke();

context.beginPath();
context.rect(220, 50, 150, 80);
//填充
context.fill();

context.beginPath();
context.rect(400, 50, 150, 80);
//描边
context.stroke();
context.fill();

//绘制圆弧,默认为逆时针
context.beginPath();
context.arc(100, 250, 60, 0, Math.PI*3/2,false);
context.stroke();
//顺时针绘制
context.beginPath();
context.arc(250, 250, 60, 0, Math.PI*3/2,true);
context.fill();

context.beginPath();
context.arc(400, 250, 60, 0, Math.PI*3/2);
context.stroke();
context.fill();

//绘制一个三角形
context.beginPath();
//起始点
context.moveTo(60,360);
context.lineTo(60,450);
context.lineTo(100,380);
context.lineTo(60,360);
//绘制路径
context.stroke();
context.closePath();


//绘制一个多边形
context.beginPath();
//起始点
context.moveTo(160,360);
context.lineTo(160,450);
context.lineTo(260,380);
context.lineTo(220,300);
context.lineTo(160,360);
//绘制路径
context.stroke();
context.closePath();

显示效果：
iamge

Gambit_hou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5游戏开发_HTML5游戏开发–第9课
cukengwei3786的博客
08-04 404
html5游戏开发HTML5 Game Development – Lesson 9 Today we continue the series of articles on game development in HTML5 using canvas. For today I have prepared new game. I have updated our lesson 4 and added...
html5游戏开发技术
01-02
HTML5游戏开发技术是当前互联网领域的一个热门话题，随着移动设备的普及和浏览器技术的提升，HTML5成为了创建跨平台游戏的理想选择。本资源提供的"HTML5游戏开发(全).pdf"很可能是一本全面介绍HTML5游戏开发的书籍，...
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发
08-29
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发，补充了上一版的欠缺的两个小程序代码。为全部《HTML+CSS3+JS动画小游戏开发》文档的源码
完全分享，共同进步——我开发的第一款HTML5游戏《驴子跳》
yujianshenbing的专栏
04-03 437
在线演示：http://yujianshenbing.w108.mc-test.com/game/donkeyjump/index.html（如果无法访问，请大家暂时先直接下载源码运行） 源码下载：请查看附件 操作方法：游戏开始后，按键盘“A”或“D”控制左右方向，也可以通过方向键控制。 　　（请了解：游戏中所有图片和音乐均来自手机版同名游戏，本游戏仅供学习参考。本文所有内容及结论均属...
GameMaker HTML5 游戏开发（一）
最新发布
龙哥盟
07-11 315
HTML5 的引入彻底改变了 Web 浏览器作为一个合法的游戏平台，具有无限的潜力。制作浏览器游戏从未如此简单，特别是使用 GameMaker Studio。HTML5 Game Development with GameMaker 将向您展示如何使用实际示例制作和发布基于浏览器的游戏。本书利用 GameMaker 强大的脚本语言，让您能够在短时间内创建您的第一个游戏。通过本指南，您将开发出全面的技能和对开发逐渐复杂的游戏的工具的一致理解，逐渐增强您的编码能力，并将其提升到一个全新的水平。
html 游戏开发_HTML5游戏开发–第5课
cukengwei3786的博客
08-05 408
html 游戏开发HTML5 Game Development – Lesson 5 Finally I decided to prepare next Game-development article. We continue a series of articles on game development in HTML5 using canvas. Today I prepared musi...
html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化&地图跳转
热门推荐
lufy小屋
01-22 1万+
首先，本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇，来实现游戏的脚本化，和利用游戏脚本实现地图场景的切换，离上次更新貌似很长时间了，你在看下面的文字之前，需要先了解前三篇在下啰嗦了些什么东东。html5游戏开发-零基础开发RPG游戏-开源讲座(一)http://blog.csdn.net/lufy_legend/article/details/7063316html5游戏开发-零基础开
HTML5游戏开发实例分享
07-23
资源名称：HTML5游戏开发实例分享资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
HTML5游戏前端开发秘籍
03-01
QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏，虽然还有很多不足，但其中使用的一些技术与技巧还是很有必要为大家分享出来，方便大家用秘籍打通各种关卡创造出更多更好的...
html5游戏开发_HTML5游戏开发–第4课
cukengwei3786的博客
08-05 147
html5游戏开发HTML5 Game Development – Lesson 4 Today we continue a series of articles on game development in HTML5 using canvas. Today we going to learn next elements: animation with sprites and basic wor...
开发 HTML5 小游戏
weixin_34315189的博客
05-23 2394
Html5小游戏 在介绍小游戏之前，先看一个框架 Phaser。 Phaser 框架是一个 快速、免费且开源的 HTML5 游戏开发框架，它提供了 Canvas 和 WebGL 两种渲染方式，兼容 PC 端与移动端浏览器。 一、Phaser 版本 在启动 Phaser 游戏前，需要定义一个 Phaser.Game 对象实例，并同时将配置信息传至该实例：var game = Phaser.Game(...
HTML5游戏
03-30
NULL 博文链接：https://codewarehouse.iteye.com/blog/1313959
html5游戏开发 10个基本小游戏源码.zip
09-04
注意：记得把项目导入HBuilder或类似软件中运行，否者无法运行。 HTML5 游戏源代码特辑，包括了捕鱼达人、植物僵尸、Solarmax、俄罗斯方块、扫雷、切水果、超级玛丽、三国杀、驴子跳、太空战舰、坦克大战等 之一
html5 游戏开发
weixin_33810006的博客
08-06 112
近来想做html5游戏开发些小东西玩一下，因为手边就是笔记本，想怎么玩就怎么玩了，今年可以说是非常重要特殊的一年，感觉有些倒霉，不过，心态最重要，该怎么做的时候就去怎么做吧，日子的24小时是不会变的，不管能活多久。 游戏开发感觉不错，所以就刚看了一个碰撞检测canvas的来做，一段段代码弄下来试，成功运行了，原理也是一些很简单的，不过是 不停地检测 FPS,不停刷新每一帧来达到最终的探测目的；...
HTML5游戏开发(一)
MARQUIS888的专栏
01-09 1019
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5游戏开发–第10课
cukengwei3786的博客
08-05 158
HTML5 Game Development – Lesson 10 Finally we can continue the series of articles on game development in HTML5 using canvas. Today I have prepared a new game – SkyWalker. Basically – this is a flight ...
html5游戏开发-弹幕+仿雷电小游戏demo
web开发自学
12-01 356
本游戏使用的是html5的canvas，运行游戏需要浏览器支持html5。 本篇文章详细讲解如何用html5来开发一款射击游戏，雷电可以说是射击游戏中的经典，下面就来模仿一下。 先看一下游戏截图 演示地址 http://fsanguo.comoj.com/html5/barrage2/index.html 游戏开发，需要用到开源库件：LegendForHtml5Programming。 Le...
【CSON原创】HTML5游戏框架cnGameJS开发实录
weixin_34253539的博客
02-14 88
　　cnGameJS是本人开发的一个基于HTML5的游戏框架，包括资源加载，碰撞检测，动画等模块。本系列文章主要介绍各个模块的开发流程，以及附上两个使用该框架进行开发的游戏demo。 目录： 1.核心函数模块 2.资源加载模块 3.基本图形模块 4.外部输入模块 5.碰撞检测模块 6.动画模块 7.精灵对象 8.游戏循环对象 9.游戏地图对象 10.游戏场景对象 11.cn...
HTML5 游戏开发
chelen_jak的专栏
03-02 915
HTML5 游戏开发实战 网址：http://subject.9ria.com/html5game.html HTML5 2D游戏引擎研发系列 http://html5gamedev.org/?p=620
HTML5游戏开发实战指南
"HTML5游戏开发.pdf" HTML5游戏开发是一本由人民邮电出版社出版的图书，作者是Jeanine Meyer。这本书专为那些希望通过HTML5技术构建动态、交互式游戏和网站的读者设计。书中详细介绍了10个不同的游戏示例，以此来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值