Canvas实战---时钟

最新推荐文章于 2024-07-02 22:34:09 发布
最新推荐文章于 2024-07-02 22:34:09 发布
阅读量257 收藏
点赞数
分类专栏： html5

首先创建HTML5模板：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>

</html>


在body中写入canvas标签：

<div style="text-align:center;">
<canvas id="canvas"  ></canvas>
</div>


因为canvas是不具备绘制的功能，得靠javascript实现绘制的功能

输入：<script type="text/javascript" ></script>

代码如下：

<script type="text/javascript" >

//定义全局

var window_width=1248;//定义Canvas的宽
var RADIUS = 8 ;//定义Canvas的绘制圆的半径
var MARGIN_TOP=60;//定义Canvas的绘制圆的半径

</script>


引用7*10的画图的球  二维数组

<script type="text/javascript" src="js/digit.js"></script>

文件内容：

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,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,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,1,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]
        ]//:
    ];




文档加载完之后的函数：

window.οnlοad=function(){
var canvas=document.getElementById('canvas');
canvas.width=window_width;
canvas.height=window_height;
if(canvas.getContext('2d')){
var context=canvas.getContext('2d');
startAnimation(context);// 开始动画

}else{
alert('当前用户浏览器不支持canvas，请更坏浏览器再试！');
}
}

//动画的函数如下：

function startAnimation(cxt){

var dateOld=new Date(); //取系统时间
var oldHours = dateOld.getHours(); //时
var oldMinutes = dateOld.getMinutes(); //分
var oldSeconds = dateOld.getSeconds(); //秒

showTime(cxt,oldHours ,oldMinutes ,oldSeconds ); //绘制显示时钟的时分秒

}



//画时间的球  调用方法和参数
function showTime(cxt,hours,minutes,seconds){
//清除旧的的花布
cxt.clearRect(0,0,window_width,window_height);

//每个球的半径为 RADIUS 加上 球之间的距离1，一共7个，长度为2*(RADIUS+1)*7,加多个半径为数字和数字的间距
//时的十位和个位
showDrawTime(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);

//时间的显示，X，Y为什么这样写，有对应的解释，如图
showDrawTime(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
showDrawTime(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);//冒号

//分的十位和个位


showDrawTime(MARGIN_LEFT+40*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
showDrawTime(MARGIN_LEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
showDrawTime(MARGIN_LEFT+70*(RADIUS+1),MARGIN_TOP,10,cxt);

//秒的十位和个位
showDrawTime(MARGIN_LEFT+80*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
showDrawTime(MARGIN_LEFT+95*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);
}


//画时间的球
function showDrawTime(x,y,num,cxt){
cxt.fillStyle='red';
//digit为7*10的2d数组的图像
for (var i=0;i < digit[num].length;i++) {
  for (var j=0;j < digit[num][i].length;j++) {
  //因为画球的二维数组，显示球为1，空白为0；如下数组，数字为1的球
         /*  [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]
       ]*/
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();
}
}
}
}




//加跳的球的动画的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>123</title>
</head>
<body>
<div style="text-align:center;">
<canvas id="canvas"  ></canvas>
</div>
<script type="text/javascript" src="js/digit.js"></script>
<script>
var window_width=1248;
var window_height=768;
var RADIUS = 8 ;
var MARGIN_TOP=60;
var MARGIN_LEFT=30;
var intervar=null; //定时器
var balls = []; //存储更新的时间的球
//随机用的颜色
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]



window.οnlοad=function(){
var canvas=document.getElementById('canvas');
canvas.width=window_width;
canvas.height=window_height;
if(canvas.getContext('2d')){
var context=canvas.getContext('2d');
startAnimation(context);// 开始动画

}else{
alert('当前用户浏览器不支持canvas，请更坏浏览器再试！');
}
}

//动画初始化
function startAnimation(cxt){
//设置旧的的时间
var dateOld=new Date(); //取系统时间
var oldHours = dateOld.getHours(); //时
var oldMinutes = dateOld.getMinutes(); //分
var oldSeconds = dateOld.getSeconds(); //秒

//设置定时器，帧数为50
intervar=setInterval(function(){
var dateVal=new Date(); //取系统时间
var newHours = dateVal.getHours(); //时
var newMinutes = dateVal.getMinutes(); //分
var newSeconds = dateVal.getSeconds(); //秒
showTime(cxt,newHours,newMinutes,newSeconds); //绘制显示时钟的时分秒
if(oldHours!=newHours){
showDrawBounce(MARGIN_LEFT,MARGIN_TOP,parseInt(newHours/10),cxt);
   showDrawBounce(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(newHours%10),cxt);
}
if(oldMinutes!=newMinutes){
showDrawBounce(MARGIN_LEFT+40*(RADIUS+1),MARGIN_TOP,parseInt(newMinutes/10),cxt);
showDrawBounce(MARGIN_LEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(newMinutes%10),cxt);
}
if(oldSeconds!=newSeconds){
showDrawBounce(MARGIN_LEFT+80*(RADIUS+1),MARGIN_TOP,parseInt(newSeconds/10),cxt);
showDrawBounce(MARGIN_LEFT+95*(RADIUS+1),MARGIN_TOP,parseInt(newSeconds%10),cxt);
}
oldHours=newHours;
oldMinutes=newMinutes;
oldSeconds=newSeconds;
showBounce(cxt)
updateBalls();//球下降动画参数修改
},50);
}


//画时间的球  调用方法和参数
function showTime(cxt,hours,minutes,seconds){
//清除旧的的花布
cxt.clearRect(0,0,window_width,window_height);

//每个球的半径为 RADIUS 加上 球之间的距离1，一共7个，长度为2*(RADIUS+1)*7,加多个半径为数字和数字的间距
//时的十位和个位
showDrawTime(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);
showDrawTime(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
showDrawTime(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);//冒号

//分的十位和个位
showDrawTime(MARGIN_LEFT+40*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
showDrawTime(MARGIN_LEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
showDrawTime(MARGIN_LEFT+70*(RADIUS+1),MARGIN_TOP,10,cxt);

//秒的十位和个位
showDrawTime(MARGIN_LEFT+80*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
showDrawTime(MARGIN_LEFT+95*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);
}
//画时间的球
function showDrawTime(x,y,num,cxt){
cxt.fillStyle='red';
//digit为7*10的2d数组的图像
for (var i=0;i < digit[num].length;i++) {
  for (var j=0;j < digit[num][i].length;j++) {
  //因为画球的二维数组，显示球为1，空白为0；如下数组，数字为1的球
         /*  [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]
       ]*/
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();
}
}
}
}


//画更新的球    调用方法和参数
function showBounce(cxt){
for( var i = 0 ; i < balls.length ; i ++ ){
       cxt.fillStyle=balls[i].color;

       cxt.beginPath();
       cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
       cxt.closePath();

       cxt.fill();
   }
}
//画更新的球  
function showDrawBounce(x,y,num,cxt){
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 ){
               var aBall = {
                   x:x+j*2*(RADIUS+1)+(RADIUS+1),
                   y:y+i*2*(RADIUS+1)+(RADIUS+1),
                   g:1.5+Math.random(),
                   vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,
                   vy:-5,
                   color: colors[ Math.floor( Math.random()*colors.length ) ]
               }

               balls.push( aBall )
    }
       }    
   }       
}
//画更新的球  加速度
function updateBalls(){
//绘制球跳动的参数
   for( var i = 0 ; i < balls.length ; i ++ ){

       balls[i].x += balls[i].vx;
       balls[i].y += balls[i].vy;
       balls[i].vy += balls[i].g;

       if( balls[i].y >= window_height-RADIUS ){
           balls[i].y = window_height-RADIUS;
           balls[i].vy = - balls[i].vy*0.75;
       }
   }
   
   //删除滚出屏幕的球
   var cnt = 0
   for( var i = 0 ; i < balls.length ; i ++ )
       if( balls[i].x + RADIUS > 0 && balls[i].x -RADIUS < window_width )
           balls[cnt++] = balls[i]

   while( balls.length > cnt ){
       balls.pop();
   }
}


</script>
</body>
</html>


digit.JS:

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,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,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,1,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]
        ]//:
    ];


lijc_boke
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5--canvas实现粒子时钟
web前端开发教程htmlcssjs
11-16 357
我们先看看粒子时钟的效果，如下： 下面我们将通过canvas和js实现， 首先要创建一个html文件并添加一个canvas画布，如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> ...
H5-canvas实现粒子时钟
在线学习web前端开发教程
01-17 309
我们先看看粒子时钟的效果，如下： 下面我们将通过canvas和js实现， 首先要创建一个html文件并添加一个canvas画布，如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> ...
基于Canvas的Html5多时区动态时钟实战
夜郎King的博客
07-02 4211
本文以Canvas为基础，支持多时区的多时钟的动态Web展示为例实现一种在Html5上的电子钟展示方法。通过本文可以了解Canvas的详细用法，掌握基本的文本绘制、样式控制、属性管理的基本知识。
AutoJs学习-Canvas绘制时钟
空名先生
07-10 4511
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
OpenHarmony实战开发-Canvas实现模拟时钟案例。
m0_70749039的博客
04-19 509
本示例介绍利用Canvas 和定时器实现模拟时钟场景，该案例多用于用户需要显示自定义模拟时钟的场景。
Canvas实战之时钟
qq_43742385的博客
03-06 518
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
微信小程序开发之——时钟-Canvas介绍(1)
2401_84121674的博客
04-20 1204
/1- 使用 wx.createContext 获取绘图上下文 context//2-设置填充色//3-绘制图形形状//4-开始绘制},
AutoJs学习-Canvas绘制时钟球球动画
空名先生
07-11 4449
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
全屏时钟java_自定义View新手实战-一步步实现精美的钟表界面
weixin_29924309的博客
02-28 271
效果展示:这里写图片描述灵感来源:这里写图片描述下面就直接进入正题吧:1.第一步,创建自定义View继承View,实现构造方法,如下public WatchBoard(Context context) {this(context, null);}public WatchBoard(Context context, AttributeSet attrs) {super(context, attrs)...
html5 canvas实现圆形时钟代码分享
09-28
### HTML5 Canvas 实现圆形时钟的关键知识点 #### 一、HTML5 Canvas 概述 - **Canvas** 是 HTML5 引入的一项重要的图形...- 该实现不仅能够作为学习 HTML5 Canvas 的实战案例，同时也为开发者提供了实际应用中的参考。
鸿蒙实战开发-如何实现时钟、闹钟、倒计时、设置屏幕亮度相功能
2401_82546228的博客
04-01 2174
本示例集中展示了时钟、闹钟、倒计时、设置屏幕亮度相关的场景，
html5制作圆弧,1.2 绘制圆弧 - HTML5 Canvas 实战
weixin_34791250的博客
06-17 1343
使用HTML5画布时，有时候需要绘制完美的圆弧。如果你对绘制彩虹、笑脸、图表等感兴趣，本节将是你努力的起点。图1-3 绘制圆弧绘制步骤按照以下步骤绘制一条圆弧：1. 定义2D画布并设置圆弧样式：window.onload = function(){var canvas = document.getElementById("myCanvas");var context = canvas.ge...
完整的PID和LQR四旋翼无人机simulink,matlab仿真，两个slx文件一个m文件，有一篇资料与其对应学习
09-09
完整的PID和LQR四旋翼无人机simulink,matlab仿真，两个slx文件一个m文件，有一篇资料与其对应学习。
SpringBoot 的食物营养分析与推荐网站 毕业论文.docx
09-09
SpringBoot 的食物营养分析与推荐网站 毕业论文.docx
全球与中国沥青添加剂和改性剂市场现状及未来发展趋势（2024版）.docx
09-09
全球与中国沥青添加剂和改性剂市场现状及未来发展趋势（2024版）.docx
cesiumlab3工具，地图高程DEM，.tif转.terrian格式文件工具
最新发布
09-09
正在做地图，的小伙伴可以一起学习，亲测可用
ssm基于SSM的宠物店线上运营系统的设计与实现毕业论文.docx
09-09
ssm基于SSM的宠物店线上运营系统的设计与实现毕业论文.docx
基于ssm的端游账号销售管理系统设计与实现.docx
09-09
基于ssm的端游账号销售管理系统设计与实现.docx
canvas border-shadow
06-03
你的问题是如何使用CSS在canvas元素上添加边框阴影效果。可以通过以下CSS属性来实现： ```css canvas { border: 1px solid #ccc; /* 添加边框 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影 */ } ``...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值