canvas刮刮乐_前端开发者

前端开发技术的起源与历史

现在前端开发主要技术

前端的开发技术

html 代码

<!DOCTYPE html>

<html>

<head>

* {

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]–>

浏览器不支持canvas.

</canvas><br>

</div>

(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

canvas刮刮乐

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

回顶部

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

回顶部

评论抢沙发