canvas刮刮卡游戏开发

最新推荐文章于 2023-10-26 16:32:19 发布

庚中

最新推荐文章于 2023-10-26 16:32:19 发布

阅读量238

点赞数

分类专栏：三.JavaScript 一.HTML 二.CSS 文章标签： canvas刮刮卡游戏开发

本文链接：https://blog.csdn.net/xiaodi520520/article/details/103276721

版权

canvas刮刮卡游戏开发

先看效果:

在这里插入图片描述

一.基础知识-画布元素的使用

1 绘制线条

思路
1. 在页面中添加画布元素
2. 获取画布元素的上下文环境对象
3. 使用上下文环境对象绘制图形，保存在内存中
4. 绘制一个线条
```
//设置画布的起始点
context.moveTo(x,y);
//从当前位置绘制直线到x,y坐标
context.lineTo(x,y);
```
案例和效果:

在这里插入图片描述

2. 绘制不同线条颜色的三角形

绘制三角形

绘制一个简单的三角形

绘制的颜色与线条宽度

//设置笔触图形的颜色
context.strokeStyle=color
-------------------------
//设置线条的宽度，以像素为单位
context.lineWidth=number

重置路径

//开始一条路径，或重置当前的路径,并切断和上一个图形的路径联系
context.beginPath()

重置路径的优势

可以实现不同大小和颜色图形的单独绘制。
案例和效果:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</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");

最低0.47元/天解锁文章

庚中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas刮刮卡游戏开发

canvas刮刮卡游戏开发先看效果:一.基础知识-画布元素的使用1 绘制线条思路在页面中添加画布元素获取画布元素的上下文环境对象使用上下文环境对象绘制图形，保存在内存中绘制一个线条//设置画布的起始点context.moveTo(x,y);//从当前位置绘制直线到x,y坐标context.lineTo(x,y);案例和效果:2. 绘制不同线条颜色的三角...
复制链接

扫一扫