文档章节

canvas 初尝试

-波仔-
 -波仔-
发布于 2016/05/09 17:03
字数 269
阅读 8
收藏 0

canvas在h5中的功能很强大,一直想做个动画demo研究下,canvas提供了矩形、圆形的api,可以画图,而难得在于动画,动画实现的原理就是一直刷新canvas中的静态图,clearRect(),然后再画图。

首先在html中插入一个canvas标签,设定其id属性,宽度、高度等。如下:

<canvas id="canvasBox" width="400" height="300" style="border: 1px red solid"></canvas>

接下来直接在js中取得canvas(通过id):

<script>

    var canvas = document.getElementById("canvasBox");

    var context = canvas.getContext("2d");

    setInterval(function () {

        move(context);

    }, 2);

    var x = 100;//矩形开始坐标

    var y = 100;//矩形结束坐标

    var mx = 0;//0右1左

    var my = 0; //0下1上

    var ml = 1;//每次移动长度

    var w = 20;//矩形宽度

    var h = 20;//矩形高度

    var cw = 400;//canvas宽度

    var ch = 300; //canvas高度

    function move(context) {

        context.clearRect(0, 0, 400, 300);

        context.fillStyle = "#EEEEFF";

        context.fillRect(0, 0, 400, 300);

        context.fillStyle = "red";

        context.fillRect(x, y, w, h);

        if (mx == 0) {

            x = x + ml;

            if (x >= cw - w) {

                mx = 1;

            }

        }

        else {

            x = x - ml;

            if (x <= 0) {

                mx = 0;

            }

        }

        if (my == 0) {

            y = y + ml;

            if (y >= ch - h) {

                my = 1;

            }

        }

        else {

            y = y - ml;

            if (y <= 0) {

                my = 0;

            }

        }

    }

</script>


© 著作权归作者所有

-波仔-
粉丝 6
博文 58
码字总数 48482
作品 0
杭州
程序员
私信 提问
LibreOffice将发展Web、iOS和Android版本

The Document Foundation今天宣布将尝试在Web浏览器和iOS、Android移动设备上运行这一办公软件,预计这些产品将在2012年年底到2013年初正式发布。 这意味着面向Web和移动设备的Google Docs和...

xiangxw
2011/10/15
2.1K
10
canvas三角函数模拟水波效果

最近项目中,ui设计了个水波效果的背景动画,然而并没有gif或svg动画,开始试着用css实现了一下,动画效果并不是很好,网上查了下基本都是用贝赛尔曲线实现,想起以看的各种前波形图,于是想...

生生123
2018/07/03
0
0
ECharts简单Demo之WEBFORM版本

前言 本来今天上午已经快写完了,一个ctrl+w关闭了,草稿箱不知道怎么回事,没有保存OO “…下午边看LPL比赛又重写一次。 这篇博文应该是在2016年就完成的,因为种种原因耽误了。本来想实现一...

andrewniu
2017/12/06
0
0
HTML5 Canvas初体验之绘图基础

相信到目前你应该已经对Canvas这一神奇的HTML5新元素有了一定的了解。在本文中,我们将深入了解画布的功能及特点,学习如何在HTML中利用Canvas绘制图形以及其它类型对象。 【E800编译】相信到...

恐空控
2013/08/04
537
0
翻译:django制作输出PDF文件

reportlab是基于python的开源免费的pdf生成工具,据说有很多应用使用reportlab生成pdf,根据最近几天的琢磨,虽然最后搞定了模板,不得不说,这种工具是十分残忍的。据说他们收费版本reportl...

mhye
2016/09/05
94
0

没有更多内容

加载失败,请刷新页面

加载更多

python学习10.04:Python list列表使用技巧及注意事项

前面章节介绍了很多关于 list 列表的操作函数,细心的读者可能会发现,有很多操作函数的功能非常相似。例如,增加元素功能的函数有 append() 和 extend(),删除元素功能的有 clear()、 remo...

太空堡垒185
25分钟前
4
0
新手插画学习的方法?教你如何自学?

插画学习的方法?教你如何自学? 从小喜欢画一些漫画头像随笔画,但是其实没有基础。个人偏好小清新手绘风的插画(如下图),每每看到都希望自己能画出这样的作品。 我其实很想说画这种美术功...

huihuajiaocheng
31分钟前
4
0
面试题

1、实现clone();

gtandsn
42分钟前
5
0
CentOS 7 部署 tesseract-ocr

官方地址 github yum-config-manager --add-repo https://download.opensuse.org/repositories/home:/Alexander_Pozdnyakov/CentOS_7/ 若提示 yum-config-manager: command not found 执行以......

阿白
42分钟前
3
0
JAVA比较器中comparator的使用

一个专用的比较器Comparator Comparator是一个专用的比较器,当一个不支持自比较或者自比较函数不能满足要求时,可写一个比较器来完成两个对象之间大小的比较。Comparator体现了一种策略模式...

daxiongdi
43分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部