炫酷的canvas

最新推荐文章于 2023-04-05 21:23:19 发布
最新推荐文章于 2023-04-05 21:23:19 发布
阅读量600 收藏 1
点赞数 1
分类专栏： HTML5 文章标签： canvas JavaScript HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35718410/article/details/52089062
版权

最近做的项目里面有涉及到canvas，虽然之前有学习过canvas，不过好久没使用，慢慢有些生疏了。下面就来说说canvas的一些基本功能，以及最后完成的一个炫酷小demo，虽然难度不大，不过比较有趣，既熟悉了canvas，又得到了很多乐趣，何乐而不为呢。

首先我们需要在html里面写一对canvas标签，id为canvas

<canvas id="canvas" style="display:block;margin:50px auto;">
    当前浏览器不支持Canvas，请更换浏览器再打开
</canvas>
canvas标签内的文字，在支持canvas画布的浏览器中不会显示，如果浏览器不支持canvas，就会做出简单的提示，当然我们也可以在js中进行判断。另外，canvas的宽和高最好不要在css中进行设置，可以写成内联样式，也可以在js中进行定义，这里我们在js中定义。

有了canvas标签，我们就可以在js中获取canvas和context对象了，代码如下

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
这样我们就可以通过context对象，在canvas画布上进行图像绘制了。

下面来说说我们的炫酷小demo，是一个通过canvas绘制的小球组成的倒计时时钟，还有一些动画效果

首先我们创建一个名为click.js的文件，在html先引入click.js文件，该文件为一个三维数组，用一个数组来存放几个二维数字矩阵，这几个矩阵对应数字0到9，还有一个冒号，如下

//绘制数字的三维数组矩阵,
var digit=[
    [
        [0,0,1,1,1,0,0],
        [0,1,1,0,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,0,1,1,0],
        [0,0,1,1,1,0,0]
    ],//0的二维数组点阵
    [
        [0,0,0,1,1,0,0],
        [0,1,1,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [1,1,1,1,1,1,1]
    ],//1
    [
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,1,1,0,0,0],
        [0,1,1,0,0,0,0],
        [1,1,0,0,0,1,1],
        [1,1,1,1,1,1,1]
    ],//2
    [
        [1,1,1,1,1,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,0,1,1,0],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
    ],//3
    [
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,1,0],
        [0,0,1,1,1,1,0],
        [0,1,1,0,1,1,0],
        [1,1,0,0,1,1,0],
        [1,1,1,1,1,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,0,1,1,0],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,1,1]
    ],//4
    [
        [1,1,1,1,1,1,1],
        [1,1,0,0,0,0,0],
        [1,1,0,0,0,0,0],
        [1,1,1,1,1,1,0],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
    ],//5
    [
        [0,0,0,0,1,1,0],
        [0,0,1,1,0,0,0],
        [0,1,1,0,0,0,0],
        [1,1,0,0,0,0,0],
        [1,1,0,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
    ],//6
    [
        [1,1,1,1,1,1,1],
        [1,1,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,1,1,0,0,0],
        [0,0,1,1,0,0,0],
        [0,0,1,1,0,0,0],
        [0,0,1,1,0,0,0]
    ],//7
    [
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
    ],//8
    [
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,1,1,0,0,0,0]
    ],//9
    [
        [0,0,0,0],
        [0,0,0,0],
        [0,1,1,0],
        [0,1,1,0],
        [0,0,0,0],
        [0,0,0,0],
        [0,1,1,0],
        [0,1,1,0],
        [0,0,0,0],
        [0,0,0,0]
    ]//:
];

有了这个数组，我们就可以用canvas绘制时钟了，首先定义一些变量及常量，绘制小球的时候会用到

var WINDOW_WIDTH=1024;    //画布的宽度
var WINDOW_HEIGHT=600;    //画布的高度
var RADIUS=8;             //小球的半径
var MARGIN_TOP=60;        //每一个数字距离画布顶端的距离
var MARGIN_LEFT=30;       //第一个数字距离画布左边距的距离                                                                                                            
const endTime=new Date(2016,7,4,15,30,00);    //倒计时的截止时间
var curShowTimeSeconds=0;  //当前显示的秒数
定义完这些量以后，我们就可以开始写主题函数了 

window.onload=function(){
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    canvas.width=WINDOW_WIDTH;
    canvas.height=WINDOW_WIDTH;
    curShowTimeSeconds=getCurrentShowTimeSeconds();
    setInterval(function(){
        render(context);
        update();
    },50)
}
其中，getCurrentShowTimeSeconds()函数用来获取当前显示的秒数，render()为负责绘制小球的函数，update()为更新显示的函数，每次改变小球位置重新绘制好后，还要更新显示才可以。 

function getCurrentShowTimeSeconds(){
    var curTime=new Date();
    var ret=endTime.getTime()-curTime.getTime();   //设定的截止时间与当前时间的毫秒数差值
    ret=Math.round(ret/1000);
    return ret>=0?ret:0;
}
function update(){
    //更新显示的时间,产生时间变化的动画
    var nextShowTimeSeconds=getCurrentShowTimeSeconds();
    var nextHours=parseInt(nextShowTimeSeconds/3600);
    var nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);
    var nextSeconds=nextShowTimeSeconds%60;

    var curHours=parseInt(curShowTimeSeconds/3600);
    var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
    var curSeconds=curShowTimeSeconds%60;
    //只比较秒即可，因为每50毫秒就比较一次
    if(nextSeconds!=curSeconds){
        curShowTimeSeconds=nextShowTimeSeconds;
    }
}
function render(cxt){
    //每一次更新画面，都要先清除画布，否则会叠加
    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
    var hours=parseInt(curShowTimeSeconds/3600);
    var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
    var seconds=curShowTimeSeconds%60;
    //绘制数字的函数
    renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);                          //绘制小时得第一个数字
    renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);            //绘制小时的第二个数字,14*(RADIUS+1)为一个数字的宽度
    renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);                            //绘制冒号
    renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);          //绘制分钟的第一个数字
    renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);          //绘制分钟的第二个数字
    renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);                            //绘制冒号
    renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);          //绘制秒钟的第一个数字
    renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);         //绘制秒钟的第二个数字
}
在上面的render()函数中，又用到了renderDigit()方法，这个方法负责绘制一个数字或者冒号，需要传入四个参数，第一个参数为绘制起点的x坐标，第二个参数为y坐标，第三个参数为要绘制的图形，0到9代表各自的数字，10代表冒号。第四个参数为context对象，renderDigit()函数如下： 

function renderDigit(x,y,num,cxt){
    cxt.fillStyle="rgb(0,102,153)";
    //两重循环遍历二位数组，值为1的地方就绘制一个圆形
    for(var i=0;i<digit[num].length;i++){
        for(var j=0;j<digit[num][i].length;j++){
            if(digit[num][i][j]==1){
                cxt.beginPath();
                cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}
至此我们就完成了用canvas绘制一个简单倒计时时钟的逻辑，只需将上述代码放在一起即可，完成后的效果如下图




星空下的嗳
关注
专栏目录
canvas写的炫酷特效
05-07
canvas绘制的网页特效，炫酷背景。canvas绘制的网页特效，炫酷背景
炫酷canvas旋转动画特效.rar
11-17
在这个“炫酷canvas旋转动画特效”的案例中，主要涉及以下几个关键知识点： 1. **Canvas元素**：HTML5 `<canvas>` 标签用于在网页上定义一块可编程的区域，这个区域可以用来绘制图形。`<canvas>` 的宽高属性（width...
分享一个炫酷的Canvas动画（粒子风暴）+教你如何把他用在你的网页背景上
qq_53679247的博客
10-14 4051
canvas> 标签定义图形，比如图表和其他图像。 标签只是图形容器，您必须使用脚本来绘制图形。HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
8个经典炫酷的HTML5 Canvas动画欣赏
weixin_34247032的博客
03-16 142
HTML5非常强大，尤其是Canvas技术的应用，让HTML5几乎可以完成所有Flash能完成的效果。本文精选了8个经典炫酷的HTML5 Canvas动画欣赏，每一个都提供全部的源代码，希望对你有所帮助。 1、HTML5 Canvas可拖动的弹性大树摇摆动画 今天让我们继续来分享一个炫酷的HTML5动画，它是一款基于HTML5 Canvas的大树摇摆动画，这款HTML5动画的特点是我们可以拖拽...
一个有意思的Canvas绘图
月光轩辕的专栏
11-26 541
pre很久之前朋友给我看过一个网站的背景canvas，感觉有意思，今天正好又看到一个网站用了这个背景，所以我就直接从网页上摘下这段代码来看一下实现原理。 效果如下 （为了分析的方便，这里面的线条粗细以及颜色被调整过）参考网页效果 实际网页效果源码分析（源码经过轻微修改，在关键步骤都做了相应的注释）<html> <body> </body> </html> <script color="25
有趣的Canvas，你值得拥有！
Michael_lzg的博客
06-06 238
Canvas 是 HTML5 提供的一个用于展示绘图效果的标签. Canvas 原意为画布, 在 HTML 页面中用于展示绘图效果. 最早 Canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现。 canvas 的使用领域 游戏 大数据可视化数据 banner 广告 多媒体 模拟仿真 远程操作 图形编辑 判断浏览器是否支持 canvas 标签 var canvas = document.getElementById('canvas') if (canvas.getContex
炫酷canvas圆圈光斑游动背景特效.rar
最新发布
11-17
这个"炫酷canvas圆圈光斑游动背景特效.rar"压缩包文件包含了一个基本的实现示例，主要文件是`index.html`。让我们一起分析这个特效的工作原理及其相关知识点。 Canvas是HTML5的一个重要组成部分，它提供了一种在...
babylonjs炫酷canvas背景动画特效.rar
11-17
【babylon.js 炫酷Canvas背景动画特效详解】 在Web开发中，为网站或应用添加生动有趣的背景动画可以极大地提升用户体验。Babylon.js是一个强大的JavaScript 3D游戏引擎，它允许开发者轻松创建出复杂的3D场景和交互...
基于three.js的炫酷Canvas 3D线条动画特效.zip
08-23
【标题】基于Three.js的炫酷Canvas 3D线条动画特效 在当今互联网技术日新月异的时代，WebGL和JavaScript库如Three.js为开发者提供了创建互动式3D图形的强大工具。Three.js是一个广泛使用的开源JavaScript库，它使得...
基于three.js的炫酷Canvas 3D线条动画特效
12-12
html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效。该3D线条动画特效可以用鼠标进行互动，canvas的背景颜色可以随机改变。你可以使用它来制作页面顶部的Banner，效果会非常的酷。
酷炫的html5 canvas全屏背景动画特效
09-08
酷炫的html5 canvas全屏背景动画特效
html5 canvas酷炫的3D动感线条动画特效
09-08
html5 canvas酷炫的3D动感线条动画特效
Canvas酷炫全屏动态背景动画特效
06-12
Canvas鼠标经过碎片高亮变化特效是一款酷炫的全屏星星闪烁星空动态背景动画特效。
超炫酷的 HTML5 Canvas 全屏动画背景
06-24
超炫酷的HTML5 Canvas全屏动画背景，一共有7组Canvas动画。如果你的网页需要一种类似屏保动画的特效，那么这款HTML5 Canvas动画可以很好的满足你的需求。因为动画是全屏的，所以外观看上去也非常大气。
css3 HTML5 Canvas炫酷3D线条延伸动画特效.zip
07-11
js代码 [removed] ;(function() { 'use strict'; var c = document.getElementById('c'); var ctx = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var cx = w / 2; var cy = h / 2; var fl = 1000; function prj(obj) { var cz = obj.z fl; if(cz === 0) return; var scl = fl / cz; obj.p.x = cx obj.x * scl; obj.p.y = cy obj.y * scl; obj.s = scl; } var P = function(x, y, z) { this.x = x; this.y = y; this.z = z; this.s = 1; this.cl = 0; this.p = { x: 0, y: 0 }; }; P.prototype = { constructor: P, update: function() { this.z -= 30; }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.scale(this.s, this.s); ctx.fillStyle = 'hsla(' this.cl ', 100%, 50%, 0.5)'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; var M = function(x, y, z) { this.list = []; this.max = 100; this.x = x; this.y = y; this.z = z; this.s = 1; this.p = { x: 0, y: 0 }; this.ax = Math.random() * (Math.PI * 2); this.ay = Math.random() * (Math.PI * 2); this.rx = Math.random() * 100; this.ry = Math.random() * 100; this.cl = Math.random() * 360; this.cls = Math.random(); }; M.prototype = { constructor: M, update: function() { this.cl = this.cls; this.ax = Math.random() * 0.1 - 0.02; this.ay = Math.random() * 0.1 - 0.02; this.x = Math.cos(this.ax) * 100; this.y = Math.sin(this.ay) * 100; this.z = 10; if(this.z > fl) this.z = fl; if(this.list.length < this.max) { if(Math.random() * 100 < 50) { var pp = new P(this.x, this.y, this.z); pp.cl = this.cl; this.list.push(pp); } } else { var pp = this.list.shift(); pp.x = this.x; pp.y = this.y; pp.z = this.z; pp.cl = this.cl; this.list.push(pp); } }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.fillStyle = 'green'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; function update(mv, list) { for(var i = 0; i < list.length; i ) { var p = list[i]; p.update(); prj(p); p.render(ctx); } for(var i = list.length-1; i >= 0; i--) { var p = list[i]; if(p.z <= -fl) continue; if(i === list.length - 1) { ctx.lineWidth = Math.random(); ctx.strokeStyle = 'hsl(' mv.cl ', 100%, 50%)'; ctx.beginPath(); ctx.moveTo(p.p.x, p.p.y); } else { ctx.lineTo(p.p.x, p.p.y); } } ctx.stroke(); } var ms = []; for(var i = 0; i < 10; i ) { ms.push(new M( Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200)); } requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, w, h); for(var i = 0; i < ms.length; i ) { var m = ms[i]; m.update(); prj(m); update(m, m.list); } }); })(); [removed] 这是一款基于HTML5 Canvas绘制的炫酷3D线条延伸动画特效，多彩颜色变幻，非常漂亮！
很炫酷的canvas动画
farmerXU的博客
10-13 159
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Code</title> <style> body{ margin:0; overflow:hidden } </style> </head> <body> <canvas id="myCanvas.
使用canvas和javaScript实现一个超炫酷的场景（附上代码）
lyk_xz的博客
04-05 364
【代码】使用canvas和javaScript实现一个超炫酷的场景（附上代码）
HTML5 Canvas的一个有趣实例
zilong_07的专栏
10-05 1909
例子来源于《HTML5 Canvas核心技术-图形、动画与游戏开发》第2章的程序2-16.这个程序里为canvas对象注册onmousemove事件处理函数时，先使用context.putImageData()函数载入鼠标按下之前的图像数据，然后再绘制线条。如果每当鼠标移动时，实时绘制鼠标指针的轨迹点到按下鼠标的点之间的每条线段，则会变得比较有趣：可以画出放射状的图案，哈哈。如下图所示。
一个超级炫酷的canvas 水波纹效果
david10000的专栏
12-20 1811
https://www.html5tricks.com/demo/html5-map-distribute-animation/index.html
HTML5 Canvas入门教程：创建炫酷网页效果
"HTML5 Canvas教程，适用于初学者，能够帮助开发者创建炫酷的网页效果。" 在HTML5中，Canvas是一个强大的图形绘制元素，它允许开发者通过JavaScript代码动态地在网页上绘制图形、图片和进行动画操作。这个基础教程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值