canvas教程

2.用canvas制作一个猜字母的小游戏

字号+ 作者:H5之家 来源:H5之家 2018-02-09 18:00 我要评论( )

function drawScreen() { //background context.fillStyle = '#ffffaa'; context.fillRect(0, 0, 500, 300); //box context.strokeStyle = '#000000'; context.strokeRect(5, 5, 490, 290); context.textBaseLine = 'top'; //date context.fillStyle = '#000


function drawScreen() {
//background
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, 500, 300);
//box
context.strokeStyle = '#000000';
context.strokeRect(5, 5, 490, 290);
context.textBaseLine = 'top';
//date
context.fillStyle = '#000000';
context.font = '10px_sans';
context.fillText(today, 150, 20);
//message
context.fillStyle = '#ff0000';
context.font = '14px_sans';
context.fillText(message, 125, 40);
//guesses
context.fillStyle = '#109910';
context.font = '16px_sans';
context.fillText('Guesses:' + guesses, 215, 60);
//higher or lower
context.fillStyle = '#000000';
context.font = '16px_sans';
context.fillText('Higher or Lower:' + higherOrLower, 150, 125);
//letters guessed
context.fillStyle = '#ff0000';
context.font = '16px_sans';
context.fillText('Letters Guessed:' + lettersGuessed.toString(), 10, 260);
if (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("You Got It!", 150, 180);
}
}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 canvas圆形气泡动画背景插件

    HTML5 canvas圆形气泡动画背景插件

    2017-06-04 13:00

  • HTML5圆形百分比进度条插件

    HTML5圆形百分比进度条插件

    2017-06-04 12:05

  • HTML5 Canvas腾讯AlloyTeam Web魔幻线条框架

    HTML5 Canvas腾讯AlloyTeam Web魔幻线条框架

    2017-05-14 09:05

  • 可创建gooey效果抖动窗口的jquery插件

    可创建gooey效果抖动窗口的jquery插件

    2017-04-15 10:00

网友点评
>