HTML5游戏开发(三)

版权声明:本文为博主原创文章,未经博主允许不得转载。 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

阅读更多
换一批

没有更多推荐了,返回首页