分享基于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>

复制代码