canvas刮刮樂和畫筆
舍不得买2块钱的刮刮乐，就只能写个类似的功能过过彩票瘾了！
布局
<div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;">
<div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">NICK彩票</div>
<div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column;">
<span>祝</span>
<span>君</span>
<span>中</span>
<span>奖</span>
</div>
<div id="canvasArea" style="width:300px;height:200px;position:relative;">
<div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:56px;color:indianred;">一等奖</div>
<canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
</div>
</div>这段html要注意的地方有2个：
flex布局，将‘祝君中奖’垂直居中，目前还有兼容问题，不过看我们大前端的发展趋势，应该很快就能搞定了；
canvas和‘一等奖’div的z-index问题，将canvas的z-index设置较高，使其置于一等奖div上面。
设置canvas画布
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
绘制刮奖区域
context.fillStyle='#A9AB9D';
context.fillRect(10,10,280,180);
context.fillStyle='#000';
context.font='50px Arial';
context.fillText('刮奖区',75,115);
填充颜色；
绘制实心矩形；
设置字体颜色；
设置字体大小类型；
绘制实心字体。
以上都是canvas基础api，看w3c就ok了。
为了好看，我将‘祝君中奖’加个字体变色
setInterval(function(){
document.getElementById('txt').style.color =
document.getElementById('txt').style.color=='
peachpuff' ? 'yellow' : 'peachpuff';
},500);刮奖功能函数
var brush=function(){//刮奖
context.clearRect(event.offsetX,event.offsetY,20,20);
};为canvas元素onmousedown和onmouseup事件
复制代码
canvas.onmousedown = function(){
// 鼠标按下时 - 绑定鼠标跟随事件
bindHandler(canvas,'mousemove',brush,false);
}
canvas.onmouseup = function(){
// 停止刮奖功能 - 解绑鼠标跟随事件
removeHandler(canvas,"mousemove",brush,false);
}复制代码
这里的事件绑定与解绑我上篇博文有封装，最后完整代码也有！
刮刮乐happy到底结束！最后附上完整代码，再看看效果吧！
demo二：画笔
布局
<div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;">
<canvas id="canvas2" width="300px" height="500px" style="background-color:lightblue;"></canvas>
</div>设置canvas画布
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");画笔功能函数
var draw=function(){
context2.fillRect(event.offsetX,event.offsetY,10,10);
};为canvas元素onmousedown和onmouseup事件
context2.font='20px Arial';
context2.strokeText('NICK画笔',100,30);//写个头
//1. 为canvas元素onmousedown和onmouseup事件
canvas2.onmousedown = function(){
// 启用画笔功能 - 绑定鼠标跟随事件
bindHandler(canvas2,'mousemove',draw,false);
}
canvas2.onmouseup = function(){
// 停止画笔功能 - 解绑鼠标跟随事件
removeHandler(canvas2,"mousemove",draw,false);
}画图工具的画笔功能到底结束！
附上完整代码：
Canvas lottery brush nick <div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;"> <div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">NICK彩票</div> <div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column;"> <span>祝</span> <span>君</span> <span>中</span> <span>奖</span> </div> <div id="canvasArea" style="width:300px;height:200px;position:relative;"> <div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:56px;color:indianred;">一等奖</div> <canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas> </div> </div> <div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;"> <canvas id="canvas2" width="300px" height="500px" style="background-color:lightblue;"></canvas> </div><script> //插件方法封装区 ;(function(){ // 事件绑定 window.bindHandler = (function() { if (window.addEventListener) {// 标准浏览器 return function(elem, type, handler) { // elem:节点 type:事件类型 handler:事件处理函数 // 最后一个参数为true:在捕获阶段调用事件处理程序;为false:在冒泡阶段调用事件处理程序。注意：ie没有这个参数 elem.addEventListener(type, handler, false); } } else if (window.attachEvent) {// IE浏览器 return function(elem, type, handler) { elem.attachEvent("on" + type, handler); } } }()); // 事件解除 window.removeHandler = (function() { if (window.removeEventListener) {// 标准浏览器 return function(elem, type, handler) { elem.removeEventListener(type, handler, false); } } else if (window.detachEvent) {// IE浏览器 return function(elem, type, handler) { elem.detachEvent("on" + type, handler); } } }()); }()); //命名区 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var canvas2 = document.getElementById("canvas2"); var context2 = canvas2.getContext("2d"); var brush=function(){//刮奖 context.clearRect(event.offsetX,event.offsetY,20,20); }; var draw=function(){//写字 context2.fillRect(event.offsetX,event.offsetY,10,10); }; //功能实现区 //刮刮乐 // 1. 绘制刮奖区域 context.fillStyle='#A9AB9D'; context.fillRect(10,10,280,180); context.fillStyle='#000'; context.font='50px Arial'; context.fillText('刮奖区',75,115); //字体变色 setInterval(function(){ document.getElementById('txt').style.color = document.getElementById('txt').style.color=='peachpuff' ? 'yellow' : 'peachpuff'; },500); //2. 为canvas元素onmousedown和onmouseup事件 canvas.onmousedown = function(){ // 鼠标按下时 - 绑定鼠标跟随事件 bindHandler(canvas,&#39;mousemove&#39;,brush,false); } canvas.onmouseup = function(){ // 停止刮奖功能 - 解绑鼠标跟随事件 removeHandler(canvas,"mousemove",brush,false); } //画笔 context2.font=&#39;20px Arial&#39;; context2.strokeText(&#39;NICK画笔&#39;,100,30);//写个头 //1. 为canvas元素onmousedown和onmouseup事件 canvas2.onmousedown = function(){ // 启用画笔功能 - 绑定鼠标跟随事件 bindHandler(canvas2,&#39;mousemove&#39;,draw,false); } canvas2.onmouseup = function(){ // 停止画笔功能 - 解绑鼠标跟随事件 removeHandler(canvas2,"mousemove",draw,false); } </script>刮刮乐：鼠标按住不放，拖动开始刮奖！
画笔：鼠标按住不放，拖动画画！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
學習canvas框架 詳解常用的canvas框架
Jan 17, 2024 am 11:03 AM
探索Canvas框架：了解常用的Canvas框架有哪些，需要具體程式碼範例引言：Canvas是HTML5中提供的一個繪圖API，透過它我們可以實現豐富的圖形和動畫效果。為了提高繪圖的效率和便利性，許多開發者開發了不同的Canvas框架。本文將介紹一些常用的Canvas框架，並提供具體程式碼範例，以幫助讀者更深入地了解這些框架的使用方法。一、EaselJS框架Ea
canvas時鐘有哪些細節
Aug 21, 2023 pm 05:07 PM
canvas時鐘的細節有時鐘外觀、刻度線、數位時鐘、時針、分針和秒針、中心點、動畫效果、其他樣式等。詳細介紹：1、時鐘外觀，可以使用Canvas繪製一個圓形錶盤作為時鐘的外觀，可以設定錶盤的大小、顏色、邊框等樣式；2、刻度線，在錶盤上繪製刻度線，表示小時或分鐘的位置；3、數位時鐘，可在錶盤上繪製數位時鐘，表示目前的小時和分鐘；4、時針、分針和秒針等等。
uniapp實現如何使用canvas繪製圖表和動畫效果
Oct 18, 2023 am 10:42 AM
uniapp實現如何使用canvas繪製圖表和動畫效果，需要具體程式碼範例一、引言隨著行動裝置的普及，越來越多的應用程式需要在行動裝置上展示各種圖表和動畫效果。而uniapp作為一款基於Vue.js的跨平台開發框架，提供了使用canvas繪製圖表和動畫效果的能力。本文將介紹uniapp如何使用canvas來實現圖表和動畫效果，並給出具體的程式碼範例。二、canvas
html2canvas有哪些版本
Aug 22, 2023 pm 05:58 PM
html2canvas的版本有html2canvas v0.x、html2canvas v1.x等。詳細介紹：1、html2canvas v0.x，這是html2canvas的早期版本，目前最新的穩定版本是v0.5.0-alpha1。它是一個成熟的版本，已經被廣泛使用，並且在許多專案中得到了驗證；2、html2canvas v1.x，這是html2canvas的新版本。
tkinter canvas有哪些屬性
Aug 21, 2023 pm 05:46 PM
tkinter canvas屬性有bg、bd、relief、width、height、cursor、highlightbackground、highlightcolor、highlightthickness、insertbackground、insertwidth、selectbackground、selectforeground、xscrollcommand屬性等等。詳細介紹
canvas滑鼠座標在哪裡
Aug 22, 2023 pm 03:08 PM
canvas取得滑鼠座標的方法：1、建立一個JavaScript範例檔；2、取得Canvas元素的引用，加入一個滑鼠移動事件的監聽器；3、當滑鼠在Canvas上移動時，會觸發getMousePos函數；4、使用「getBoundingClientRect()」方法取得Canvas元素的位置和大小信息，透過event.clientX和event.clientY取得滑鼠座標即可。
探索canvas在遊戲開發中的強大作用及應用
Jan 17, 2024 am 11:00 AM
了解canvas在遊戲開發中的威力與應用概述：隨著網路科技的快速發展，網頁遊戲越來越受到廣大玩家的喜愛。而作為網頁遊戲開發中重要的一環，canvas技術在遊戲開發中逐漸嶄露頭角，展現出強大的威力與應用。本文將介紹canvas在遊戲開發中的潛力，並透過具體的程式碼範例來展示其應用。一、canvas技術簡介canvas是HTML5中新增的元素，它允許我們使用
