canvas刮刮乐
摘要： 前端开发技术的起源与历史 现在前端开发主要技术 前端的开发技术 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta http-eq……
| 前端开发技术的起源与历史 |
| 现在前端开发主要技术 |
| 前端的开发技术 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”keywords” content=”canvas”>
<meta name=”robots” content=”all”>
<meta name=”author” content=”lut”>
<title>刮刮乐</title>
<style type=”text/css”>
* {
padding: 0;
margin: 0;
}
.box {
margin-top: 50px;
text-align: center;
}
.canvas_ele {
background-color: #aaa;
}
</style>
</head>
<body>
<!–[if lt IE 9]>
<label>这位少侠，你的刀已经跟不上目前流行刀客的节奏，赶紧升级体验现代浏览器的顺畅吧！</label>
<a href=”http://windows.microsoft.com/zh-cn/internet-explorer/download-ie” title=”下载高本版的ie浏览器，ie19…”>下载IE高版本浏览器ie9+</a>或
使用<a href=”http://rj.baidu.com/soft/detail/14744.html?ald” title=”谷歌浏览器下载”>chrome</a>
<![endif]–>
<div class=”box”>
<canvas class=”canvas_ele” width=”400px” height=”200px”>
浏览器不支持canvas.
</canvas><br>
<button>再试一次</button>
</div>
<script type=”text/javascript”>
(function () {
function getPic(box) {
this.box = box; //包含框
this.btn = box.querySelector(“button”); //按钮
this.oCan = box.querySelector(“.canvas_ele”); //canvas对象
this.ctx = this.oCan.getContext(“2d”); //2d对象
this.ow = this.oCan.width; //画布宽度
this.oh = this.oCan.height; //画布高度
this.isIn = false; //监听移入
this.arr = [“再来一次”, “美女一只”, “国内5日游”, “入门”, “得道”];
this.txtWidth = 0;
this.code = “”;
this.l = this.oCan.offsetLeft;
this.t = this.oCan.offsetTop;
}
getPic.prototype = {
init: function () {
var a = this;
var nindex = parseInt(Math.random() * a.arr.length);
a.code = a.arr[nindex];
a.ctx.beginPath();
a.ctx.globalCompositeOperation = “source-over”;
a.ctx.fillStyle = “#ccc”;
a.ctx.fillRect(0, 0, a.ow, a.oh);
a.ctx.font = (a.oh * 2 / 5) + “px Arial”;
a.ctx.fillStyle = “#24e”;
a.txtWidth = a.ctx.measureText(a.code).width;
},
setFunc: function () {
this.init();
this.bindFunc();
},
bindFunc: function () {
var a = this;
a.oCan.onmousedown = function (ev) {
a.isIn = true;
var x = ev.clientX – a.l;
var y = ev.clientY – a.t;
a.ctx.lineWidth = 10;
a.ctx.moveTo(x, y);
}
a.oCan.onmousemove = function (ev) {
if (a.isIn) {
var x = ev.clientX – a.l;
var y = ev.clientY – a.t;
a.ctx.globalCompositeOperation = “destination-out”;
a.ctx.lineTo(x, y);
a.ctx.stroke();
a.ctx.globalCompositeOperation = “destination-over”;
a.ctx.fillText(a.code, (a.ow – a.txtWidth) / 2, a.oh * 3 / 5, a.ow)
}
}
document.onmouseup = function () {
a.isIn = false;
}
a.btn.onclick = function () {
a.init();
}
document.onseletstart = function () {
return false;
}
}
}
var obox = document.querySelector(“.box”);
var cut = new getPic(obox);
cut.setFunc();
})();
</script>
</body>
</html>
| 前端web开发技术架构 |
| web前端开发技术 课件 |
| 前端开发技术和工具 |
» 本文来自：前端开发者 » 《canvas刮刮乐》
» 本文链接地址：https://www.rokub.com/6302.html
» 您也可以订阅本站：https://www.rokub.com
近期评论