H5 canvas倒计时_前端开发者

前端开发未来前景2018|2018前端开发笔记本|动态网站开发前端

代码片段 1

<!doctype html>

<head>

<title>前端网站开发兼职:H5倒计时</title>

<style>

#canvas {

border: 1px solid black;

background-color: skyblue;

}

</style>

window.onload = function () {

var canvas = document.getElementById(“canvas”);

var ctx = canvas.getContext(“2d”);

function draw(angle) {

ctx.save();

ctx.translate(150, 150);

ctx.rotate(-Math.PI / 2)

ctx.fillStyle = “yellow”;

ctx.beginPath();

ctx.arc(0, 0, 100, Math.PI / 180 * angle, Math.PI * 2, false);

ctx.lineTo(0, 0);

ctx.closePath();

ctx.fill();

ctx.restore();

}

var angle = 0;

var count = 0;

var per = 10;

var timer = setInterval(function () {

angle += 1;

if (angle % 36 == 0) {

per–;

}

if (angle >= 360) {

clearInterval(timer);

}

ctx.clearRect(0, 0, 300, 300);

draw(angle);

ctx.fillText(per, 148, 154);

}, 30)

}

</script>

</head>

<body>

</body>

</html>

网站开发是前端还是后端|前端开发常逛的网站|网站前端开发收入怎样

H5 canvas倒计时

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发