html:canvas画布绘图简单入门-刮刮乐-4

简介: html:canvas画布绘图简单入门-刮刮乐-4

image.png

<style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box-wrap {
            position: relative;
            width: 300px;
            height: 150px;
            border: 1px solid #eeeeee;
        }
        .box {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            color: red;
            letter-spacing: 20px;
        }
        .canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- 刮刮乐 -->
    <div class="box-wrap">
        <div class="box"
             id="text">谢谢惠顾</div>
        <canvas class="canvas"
                id="canvas"
                width="600"
                height="300"></canvas>
    </div>
    <script>
        let canvas = document.querySelector('#canvas');
        let text = document.querySelector('#text');
        let ctx = canvas.getContext('2d');
        let clientWidth = canvas.clientWidth;
        let clientHeight = canvas.clientHeight;
        let width = canvas.width
        let height = canvas.height
        // 缩放比例
        let widthScale = width / clientWidth;
        let heightScale = height / clientHeight;
        // 绘制背景图
        ctx.fillStyle = 'gray';
        ctx.fillRect(0, 0, width, height);
        ctx.save();
        // 绘制文字
        ctx.translate(width / 2, height / 2);
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.font = "50px 微软雅黑"
        ctx.fillStyle = 'white';
        ctx.fillText('刮开查看', 0, 0);
        // ctx.fill();
        ctx.restore();
        // 监听鼠标事件
        let isDraw = false;
        canvas.onmousedown = function (e) {
            // console.log(e);
            isDraw = true;
        }
        canvas.onmouseup = function (e) {
            // console.log(e);
            isDraw = false;
        }
        canvas.onmousemove = function (e) {
            if (!isDraw) {
                return;
            }
            // console.log(e);
            // ctx.fillStyle = 'white';
            // 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的
            ctx.globalCompositeOperation = 'destination-out'
            // console.log(e.offsetX, e.offsetY);
            ctx.arc(e.offsetX * widthScale, e.offsetY * heightScale, 30, 0, Math.PI / 180 * 360);
            ctx.fill();
        }
        // 奖品设置
        let list = [{
                title: '一等奖',
                probability: 0.1
            },
            {
                title: '二等奖',
                probability: 0.2
            },
            {
                title: '三等奖',
                probability: 0.3
            }
        ]
        let randomNum = Math.random();
        console.log(randomNum);
        let randomNumUpperBound = 0;
        for (let item of list) {
            randomNumUpperBound += item.probability
            if (randomNum < randomNumUpperBound) {
                text.innerText = item.title;
                break;
            }
        }
    </script>
相关文章
|
2天前
|
移动开发 前端开发 JavaScript
HTML画布
HTML画布
16 0
|
9天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
16 4
|
9天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
16 1
HTML5 Canvas发光Loading源码
|
9天前
|
移动开发 前端开发 HTML5
Canvas实现超酷Loading动画HTML代码
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
14 1
Canvas实现超酷Loading动画HTML代码
|
9天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
9天前
|
移动开发 前端开发 HTML5
【专栏:HTML 基础篇】HTML 入门:从零开始构建你的第一个网页
【4月更文挑战第30天】本文引导初学者从零开始学习HTML,了解这种标记语言用于构建网页的基础知识。通过介绍HTML的基本结构,如文档类型声明、根标签、头部和主体,以及如何添加文本、设置标题、插入图片、创建链接、使用列表、制作表格和设计表单,帮助读者构建第一个网页。同时强调,结合CSS可实现网页的美化。
|
9天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
31 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
9天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
42 0
|
9天前
|
移动开发 自然语言处理 前端开发
《HTML 简易速速上手小册》第1章:HTML 入门(2024 最新版)
《HTML 简易速速上手小册》第1章:HTML 入门(2024 最新版)
20 0
|
移动开发 前端开发 开发者
HTML5 画布|学习笔记
快速学习 HTML5 画布