网页游戏开发基础合集--从刮刮卡效果开启页面游戏开发之路

北漂小瑾

于 2024-03-07 19:11:11 发布

阅读量535

点赞数 18

文章标签：前端 javascript canva可画

本文链接：https://blog.csdn.net/m0_70985211/article/details/136543075

版权

1.如何在浏览器绘制一条直线？

1）添加一个画布元素
画布默认是300*150大小
2）获取工具集，使用工具集
a 绘制一个起始点 moveTo(30, 30)
b 绘制一个终止点 lineTo(90, 30)
c 用画笔描点 stroke()

2.如何用画布绘制一个三角形？

1）添加一个画布元素
2）获取工具集，使用工具集
a 绘制一个起始点 moveTo()
b 绘制第二个点 lineTo()
c 绘制第三个点 lineTo()
d 闭合路径，形成一个三角形 lineTo(起始点) 或 closePath()方法
e 用画笔描点 stroke()

3.绘制不同颜色边三角形？

//设置绘制图形的宽度 lineWidth 属性
cxt.lineWidth = 5;
//设置线条颜色 strokeStyle 属性
cxt.strokeStyle = "red";
//重置当前路径
cxt.beginPath();

4.文字的绘制?

1）文字的样式设置
font='字体样式的设置'
例如：cxt.font = "bold 20px 黑体";
2）绘制文字
不描边文字：fillText(text,x,y,[max]) [max]可以不配置
描边文字：strokeText(text,x,y[max])
3）文字的对齐方式
水平对齐：
textAlign='left center right'
垂直对齐：
textBaseline='top middle bottom'

5.将画布保存为图片的方法?

画布名.toDataURL('image/png',1)
'image/png'是类型，图片或者png类型

6.矩形的绘制

方法一：
1）绘制路径
cxt.rect(30,30,50,50) 参数依次是(x,y,width,height)
2）描边
cxt.stroke()
3）填充颜色
cxt.fill()
方法二：
cxt.fillStyle='red' // 设置填充颜色
cxt.strokeRect(30, 30, 50, 50); // 空心绘制
cxt.fillRect(30, 30, 50, 50); // 实心绘制
//清空正方形
cxt.clearRect(30, 30, 50, 50);

7.绘制圆形

1）绘制路径
cxt.arc(x,y,r,0,Math.PI*2,clockwise)
0 表示起始度数
r 表示圆的半径
Math.PI 表示半圆
Math.PI*2 表示整圆 PI表示180度
clockWise 表示是否是逆时针 true表示逆时针
2）描边
cxt.stroke()
3）填充颜色
cxt.fill()

8.绘制图片

1）在画布上绘制固定坐标的图像
context.drawImage(img,x,y);
2）在画布上绘制不仅固定坐标，且规定图像的宽度和高度图像
context.drawImage(img,x,y,width,height);
3）在画布上剪切图像，并在画布上绘制被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); //前面是在图片上截取的尺寸，后面是在画布上展现的尺寸

9.实现刮刮卡效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>刮刮乐</title>
    <style></style>
  </head>
  <body>
    <canvas id="cvs" style="border: solid 1px #ccc"></canvas>

    <script type="text/javascript">
      var cvs = document.getElementById("cvs");
      var cxt = cvs.getContext("2d");

      // 1.绘制一个生成随机文字的界面，并存为图片--------------------------------

      var textArr = ["一等奖", "二等奖", "三等奖", "未中奖"];
      //随机生成一个中将信息元素
      var getTxt = textArr[Math.floor(Math.random() * textArr.length)];
      console.log(getTxt);

      //绘制中奖信息
      cxt.font = "bold 25px 黑体";
      cxt.textAlign = "center";
      cxt.textBaseline = "middle";
      cxt.fillStyle = "red";
      // 将获奖信息写到画布中间
      cxt.fillText(getTxt, cvs.width / 2, cvs.height / 2);

      //将中奖信息生成图片,并设置为画布背景
      var imgUrl = cvs.toDataURL("image/png", 1);
      cvs.style.background = "url(" + imgUrl + ")";

      // 2.绘制矩形蒙版-------------------------------------------
      cxt.clearRect(0, 0, cxt.width, cxt.height); // 把不必要的东西清除干净
      cxt.fillStyle = "#ddd";
      cxt.fillRect(0, 0, cvs.width, cvs.height);

      // 3.绘制刮涂区域------------------------------------------
      var flag = false;
      cvs.addEventListener("mousedown", function () {
        flag = true;
        cxt.globalCompositeOperation = "destination-out"; //！！！配置删除性能 globalCompositeOperation
      });
      cvs.addEventListener("mousemove", function (e) {
        if (flag) {
          var x = e.clientX;
          var y = e.clientY;
          cxt.fillStyle = "red";
          cxt.fillRect(x, y, 20, 20);
        }
      });
      cvs.addEventListener("mouseup", function () {
        flag = false;
      });
    </script>
  </body>
</html>

北漂小瑾

关注

18
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
网页游戏开发基础合集--从刮刮卡效果开启页面游戏开发之路

1）添加一个画布元素画布默认是300*150大小2）获取工具集，使用工具集a 绘制一个起始点 moveTo(30, 30)b 绘制一个终止点 lineTo(90, 30)c 用画笔描点 stroke()
复制链接

扫一扫