• 前言

Html5添加的最受欢迎的功能就是<canvas>元素，它负责在页面中设定一个区域，然后在里面可以通过javascript动态地在其内绘制图形。

主流浏览器，IE9+，手机端都是支持它的。

  • 创建Canvas

要使用Canvas元素就必须先设置其width和height，指定绘图区域的大小

类似：<canvas id="canvas" width="800" height="800"/>

如果要在这块画布上绘图的话，首先要取得绘图上下文,需调用getContext（）方法

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

//判断浏览器是否支持canvas

if(canvas.getContext)

{   var draw=canvas.getContext("2d");//这里2d  取得2d上线文对象，还有一个WebGL的3D上下文（还未接触过，不在此陈诉了）

}

我们用2d上下文可以绘制简单的2d图形，如矩形，弧线。

  • 利用Canvas创建曲线运动

这里有个demo是曲线运动，直接上代码

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset=gbf>

 <title>曲线运动</title>

 <script>

 //box

 var box_x=0;

 var box_y=0;

 var box_width=500;

 var box_height=500;

 //ball

 var ball_x=10;

 var ball_y=10;

 var ball_radius=10;

 var ball_vx=10;

 var ball_vy=0;

 //constant

 var g=10;//note

 var rate=0.9;

 //bound

 var bound_left=box_x+ball_radius;

 var bound_right=box_x+box_width-ball_radius;

 var bound_top=box_y+ball_radius;

 var bound_bottom=box_y+box_height-ball_radius;

 //context

 var ctx;

 function init()

 {

 ctx=document.getElementById('canvas').getContext('2d');

 //

 ctx.lineWidth=ball_radius;

 //设置球的颜色

 ctx.fillStyle="rgb(200,0,50)";

 move_ball();

 setInterval(move_ball,100);

 } 

 function move_ball()

 {

 //清除画布上的矩形区域

 ctx.clearRect(box_x,box_y,box_width,box_height);

 move_and_check();

 //开始曲线路径

 ctx.beginPath();

 //绘制圆球

 ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);

 //fillstyle填充

 ctx.fill();

 //绘制指定矩形

 ctx.strokeRect(box_x,box_y,box_width,box_height);

 } 

 function move_and_check()

 {

 var cur_ball_x=ball_x+ball_vx;

 var temp=ball_vy;

 ball_vy=ball_vy+g;

 var cur_ball_y=ball_y+ball_vy+g/2;

 if(cur_ball_x<bound_left)

 {

 cur_ball_x=bound_left;

 ball_vx=-ball_vx*0.9;

 ball_vy=ball_vy*0.9;

 }

 if(cur_ball_x>bound_right)

 {

 cur_ball_x=bound_right;

 ball_vx=-ball_vx*0.9;

 ball_vy=ball_vy*0.9;

 }

 if(cur_ball_y<bound_top)

 {

 cur_ball_y=bound_top;

 ball_vy=-ball_vy*0.9;

 ball_vx=ball_vx*0.9;

 }

 if(cur_ball_y>bound_bottom)

 {

 cur_ball_y=bound_bottom;

 ball_vy=-ball_vy*0.9;

 ball_vx=ball_vx*0.9;

 }

 ball_x=cur_ball_x;

 ball_y=cur_ball_y;

 }

 </script>

 </head>

 <body onLoad="init()">

 <canvas id="canvas" width="800" height="800"/>

 </body>

 </html>

代码中包含了少部分2D上下文API。详细API请参考：

http://www.w3school.com.cn/html5/html_5_canvas.asp;

http://blog.teamtreehouse.com/getting-started-with-the-canvas-api

http://javascript.ruanyifeng.com/htmlapi/canvas.html

  • 最后

很多css3不能表现的复杂动画，通过canvas，js来配合解决是极好的，当然这里面还有很多东西，这里小小记录下canvas的一下基本用法。

Canvas实现曲线运动的更多相关文章

  1. html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  3. canvas高级动画示例

    canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...

  4. 使用JavaScript和Canvas实现下雪动画效果

    该下雪动画效果使用了HTML5中Canvas画布实现,其中涉及了物理学中曲线运动的相关知识与运算. index.html <!DOCTYPE html> <html lang=&qu ...

  5. canvas动画：气泡上升效果

    HTML5中的canvas真是个很强大的东西呢! 这几天突发奇想想做一个气泡上升的动画,经过许久的思考和多次失败,终于做出了如下效果 由于是录制的gif图,看着会有点卡顿,实际演示是很自然的 想要做出 ...

  6. js数学公式-曲线运动

    ---勾股定理 a*a + b*b =c*c ---三角函数 正弦 : sin 余弦 : cos 正切 : tan 余切 : cot 正弦定理 a/sinA = b/sinB =c/sinC = 2r ...

  7. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  8. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  9. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

随机推荐

  1. 【JS】Intermediate9:jQuery: Other Tricks

    1.DOMContentLoaded Run JavaScript only when the DOM is loaded and ready (but before stylesheets are ...

  2. rmi 与 远程代理复习

    ref:http://blog.csdn.net/pipisky2006/article/details/7296592 RMI: 远程方法调用,简单来说以前是调用本地对象的方法,现在如果对象在另外一 ...

  3. 杨氏矩阵 leecode 提

    提交网址https://oj.leetcode.com/problems/search-a-2d-matrix/ 有个矩阵中的数,从左向右递增,从上而下递增,快速查找是一个数是是否存在,剑指offer ...

  4. Sql->Linq-> Lambda 相互转换

    Linq 转 SQL 或 Linq 转 Lambda : 工具: LinqPad Sql 转 Linq to Entity: 工具: Linqer

  5. python —print

    今天开始学python了,“装X”安装了最新版本python 3.4.1 然后,print “hello world!" 就出错了... 一搜原来... python v3.0以后的版本pr ...

  6. sql server smo

    在SQL Server2005以前的版本中,SQL分布式管理对象(SQL-DMO)为我们提供了非常有效的方法来通过编程的方式管理SQL Server.SQL-DMO支持基于COM的接口,开发人员可以通 ...

  7. PTA 5-12 How Long Does It Take (25分)

    这题看不太懂题目啊~  参考的http://blog.csdn.net/qq_26437925/article/details/49420089?locationNum=6&fps=1 先放着 ...

  8. 推送通知/传感器/UIDynamic仿真(推送通知已适配iOS10)

    推送通知/传感器/UIDynamic 一.推送通知 1.推送通知简介 什么是推送通知 此处的推送通知与NSNotification没有任何关系 可以理解为,向用户推送一条信息来通知用户某件事情 作用: ...

  9. 【Android - 进阶】之自定义视图浅析

    1       概述 Android自定义View / ViewGroup的步骤大致如下: 1) 自定义属性: 2) 选择和设置构造方法: 3) 重写onMeasure()方法: 4) 重写onDra ...

  10. Android基本功：Handler消息传送机制

    一.什么是UI线程 当程序第一次启动的时候,Android会同时启动一条主线程( Main Thread). 主要负责处理与UI相关的事件. 二.UI线程存在的问题 出于性能优化考虑,Android的 ...