分享基于html5画布的一个小控件

宋天琪

前端时间看到某学校的查看成绩的网站是通过刮刮卡的形式来实现的！觉得比较有趣,于是想到了html5的画布功能，做了一个，代码如下：
希望对大家有帮助！

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>画布练习</title>
<style type="text/css">
#score, canvas
{
position:absolute;
top:50px;
left:50px;
cursor:pointer;
z-index:100;
}
#score
{
display:block;
height:100px;
width:100px;
background:#EFEFEF;
color:#ff6a00;
font-family:Consolas;
font-size:30px;
font-weight:bold;
z-index:-100;
}
</style>
</head>
<body style="text-align:center">
<canvas id="canvas_background" height="100" width="100"></canvas>
<canvas id="score"></canvas>
<script src="../Scripts/jQuery-1.7.1.js" type="text/javascript"></script>
<script>
function createGG(score) {
var canvas_score = document.querySelector('#score'), ctx_score = canvas_score.getContext('2d');
ctx_score.font = '400 82px Consolas';
ctx_score.fillStyle = 'Red';
ctx_score.fillText(parseInt(score), 100, 100);
var canvas = document.querySelector('#canvas_background'), ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(22, 22, 22)';
ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.width);
//事件
window.onmousedown = function (event) {
canvas.onmousemove = function (event) {
ctx.clearRect(event.offsetX, event.offsetY, 20, 20);
}
}
window.onmouseup = function () {
canvas.onmousemove = function (event){ };
}
}
</script>
</body>
</html>

复制代码

刘亚中 · 刘亚中

使用的时候执行createGG函数里面的score为成绩的分数

帐号		自动登录	找回密码
密码			加入黑马

1 个回复