canvas实现吃豆人小demo

香蕉芭辣

于 2019-12-26 19:59:49 发布

阅读量996

点赞数

文章标签： canvas html5

本文链接：https://blog.csdn.net/weixin_44049725/article/details/103721270

版权

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

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

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

其次canvas主要应用的领域

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

下面我们就直接开始，代码如下：

<!DOCTYPE html>
<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=

最低0.47元/天解锁文章

香蕉芭辣

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
canvas实现吃豆人小demo

首先我们要知道什么是canvas?canvas是HTML5提供的一种新标签HTML5 标签元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。标签只是图形容器，必须使用脚本来绘制图形。Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。—其默认在页面上得的大小是width:300px; height:100px;canvas标签使...
复制链接

扫一扫