Canvas画刮刮乐
时间:2019-01-19
本文章向大家介绍Canvas画刮刮乐,主要包括Canvas画刮刮乐使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!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>
<style>
*{
margin: 0;
padding: 0;
}
#out{
border: 1px solid #ccc;
position: absolute;
z-index: 999;
}
#con{
position: absolute;
height: 100px;
width: 200px;
line-height: 100px;
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<canvas id="out" width="200" height="100"></canvas>
<div id="con"></div>
</body>
<script>
var cvs = document.getElementById("out")
var con = document.getElementById("con")
var arr = ["别墅","100w","谢谢惠顾"]
var i = Math.floor(Math.random()*arr.length)
con.innerHTML = arr[i]
var ctx = cvs.getContext("2d");
ctx.beginPath()
ctx.fillStyle="#ccc"
ctx.fillRect(0,0,cvs.width,cvs.height)
ctx.closePath()
cvs.onmousedown = function(){
document.onmousemove=function(e){
ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,20,20)
}
document.onmouseup=function(){
document.onmousedown = null;
document.onmousemove=null;
}
}
</script>
</html>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- thinkphp5引入公共部分header、footer的方法详解
- php实现文章评论系统
- PHP如何搭建百度Ueditor富文本编辑器
- 浅谈keras.callbacks设置模型保存策略
- pandas之分组groupby()的使用整理与总结
- PHP fclose函数用法总结
- Python collections.defaultdict模块用法详解
- PHP crc32()函数讲解
- python读取图像矩阵文件并转换为向量实例
- PHP echo()函数讲解
- Python3开发环境搭建详细教程
- php使用QueryList轻松采集js动态渲染页面方法
- PHP convert_uudecode()函数讲解
- php实现在线考试系统【附源码】
- 实例介绍PHP中zip_open()函数用法