HTML5游戏开发(三)

最新推荐文章于 2025-06-29 09:05:09 发布

原创最新推荐文章于 2025-06-29 09:05:09 发布 · 949 阅读

1 ·

CC 4.0 BY-SA版权

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);
}

显示效果：

(三)渐变色与图案

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);
}

显示效果：

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);
}

显示效果：

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