canvas实现吃豆人小demo

首先我们要知道什么是canvas?

  1. canvas是HTML5提供的一种新标签
  2. HTML5 标签元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。
  3. 标签只是图形容器,必须使用脚本来绘制图形。

Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。—其默认在页面上得的大小是width:300px; height:100px;
canvas标签使用JavaScript在网页上绘制图像,本身不具备绘图功能。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

其次canvas主要应用的领域

  1. 游戏:canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas游戏在流畅度和跨平台方面更牛。
  2. 可视化数据.数据图表话。
  3. banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。

下面我们就直接开始,代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" context="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" context="ie=edge">
    <title>title>
head>
<body>
    <canvas id="canvas" width="400" height="400">
		你的浏览器不支持canvas,请升级浏览器。 
	canvas> 
body>
<script>
    var canvas = document.getElementById("canvas"); //获取页面中的canvas元素
    var context = canvas.getContext('2d');     //获取2d绘图上下文,俗称画笔。
    var tiemr = null;      //设置一个定时器变量
	
	//嘴巴张开时的绘制方法
    function open() {
      
    	//绘制整个身体
        context.beginPath(); 
        context.arc(100, 100, 100, Math.PI * 0.25, Math.PI * 7 / 4);
        context.lineTo(100, 100)
        context.closePath();
        context.fillStyle = 'pink';
        context.fill();
		
		//绘制它的眼睛
        context.beginPath();
        context.arc(100, 50, 20, 0, Math.PI * 2);
        context.closePath();
        context.fillStyle = '#000';
        context.fill();
		
		//绘制它的眼珠
        context.beginPath();
        context.arc(100, 50, 8, 0, Math.PI * 2);
        context.closePath();
        context.fillStyle = 'red';
        context.fill();
		
		//绘制它的食物
        context.beginPath();
        context.arc(150, 100, 20, 0, Math.PI * 2);
        context.closePath();
        context.fillStyle = 'green';
        context.fill();
    }
	
	//嘴巴关闭时的
    function close() {
      
    	//绘制整个身体
        context.beginPath();
        context.arc(100, 100, 100, 0, Math.PI * 2);
        context.closePath();
        context.fillStyle = 'pink';
        context.fill();
		
		//绘制它的眼睛
        context.beginPath();
        context.arc(100, 50, 20, 0, Math.PI * 2);
        context.closePath();
        context.fillStyle = '#000';
        context.fill();
		
		//绘制它闭合的嘴巴
        context.beginPath()
        context.moveTo(100, 100);
        context.lineTo(200, 100);
        context.closePath();
        context.stroke();
    }
    var i = 0;
    //设置定时器
    timer = setInterval(function() {
      
        i++;
        //如果当i取余2等于0时
        if (i % 2 == 0) {
      
            context.clearRect(0, 0, 400, 400);
            //执行张开嘴巴的这个绘制函数,让其一直绘制
            open();
        } else {
      
            context.clearRect(0, 0, 400, 400);
            //执行闭合嘴巴的这个绘制函数,让其一直绘制
            close();
        }
    }, 500)
script>
html>

你可能感兴趣的:(canvas,html5)