canvas应用

最新推荐文章于 2024-05-27 08:51:51 发布
最新推荐文章于 2024-05-27 08:51:51 发布
阅读量284 收藏 1
点赞数
分类专栏： html&html5 JS 文章标签： canvas setInterval js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunday97/article/details/88375072
版权 

    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      .btn{
          position:absolute;
      }
        .btn button{
            border-radius:50%;
            padding:5px;
        }
    </style>
</head>
<body>

<div class="btn">
    <button class="btnA">暂停</button>
    <button class="btnB">继续</button>
    <button class="btnC">重播</button>
</div>
<canvas id="myCanvas" width="500px" height="500px"></canvas>
<script>
    var btnA = document.getElementsByClassName('btnA')[0];
    var btnB = document.getElementsByClassName('btnB')[0];
    var btnC = document.getElementsByClassName("btnC")[0];
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext('2d');
    var setInterLine;
    var w = canvas.width;
    var h= canvas.height;
    //继续键按钮
    btnA.onclick=function(){
        clearInterval(setInterLine);
    };
    //暂停键按钮
    btnB.onclick=function(){
        play();
    };
    //重播键按钮
    btnC.onclick=function(){
        ctx.clearRect(0,0,w,h);
        ctx.beginPath();
        ctx.strokeStyle='#' + (Math.random()*30 * 0xfffffff<<0).toString(16);//任意的取线条颜色
        play();
    };
    //定时器函数
    function setInter(lineName){
        setInterLine = setInterval(lineName, 10);
    }
    //左边斜线条
    function drawLeftLine(startX,startY,X,Y) {
        function leftLine() {
            if (startX>X && startY<Y) {
                ctx.moveTo(startX, startY);
                ctx.lineTo(--startX, ++startY);
                ctx.stroke();
            } else {
            }
        }
        setInter(leftLine);
    }
    //底部斜线条
    function drawBottomLine(startX,startY,X,Y){
       function bottomLine(){
           if (startX<X && startY<Y) {
               ctx.moveTo(startX, startY);
               ctx.lineTo(++startX, ++startY);
               ctx.stroke();
           } else {
           }
       }
        setInter(bottomLine);
    }
    //右边斜线条
   function drawRightLine(startX,startY,X,Y) {
        function rightLine(){
            if (startX<X && startY>Y) {
                ctx.moveTo(startX, startY);
                ctx.lineTo(++startX, --startY);
                ctx.stroke();
            } else {
            }
        }
       setInter(rightLine);
   }
   //顶部斜线条
    function drawTopLine(startX,startY,X,Y) {
        function topLine() {
            if (startX>X && startY>Y) {
                ctx.moveTo(startX, startY);
                ctx.lineTo(--startX, --startY);
                ctx.stroke();
            } else {
            }
        }
        setInter(topLine);
    }
    //线条播放函数
   function play(){
       drawLeftLine(250,10,9,251);
       setTimeout(function(){
           drawBottomLine(10,250,256,491);
       },2500);
       setTimeout(function(){
           drawRightLine(250,490,491,250);
       },5000);
       setTimeout(function(){
           drawTopLine(490,250,249,9);
       },7000);
   }
</script>
</body>
子月吾生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
15个HTML5Canvas应用欣赏
03-02
今天，我们收集了15个优秀的canvas应用，每个开发者都应该知道。1.SketchPadSketchpad是个优秀的HTML5应用，帮助我们创建有用的绘图应用，使用JS和canvas元素。Sketchpad的绘图工具具有丰富的功能。2....
Delphi Canvas应用
04-26
Delphi Canvas应用是Delphi编程中的一个重要概念，它在创建图形、绘制用户界面元素时扮演着核心角色。Canvas是Delphi中的一个类，通常用于在窗体、控件或者设备上进行绘图操作。它的全称是TCanvas，是VCL（Visual ...
canvas 基本用法
似水流年QC的博客
07-05 3255
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
canvas的使用
廊坊吴彦祖
03-11 1371
canvas的使用 HTML5 < canvas > 标签是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素，是众多广泛使用的网络 2D 图像渲染标准之一，可以用于绘制图表、制作图片构图或者制作动画 canvas 元素本身并没有绘制能力（仅仅是图形的容器），它公开了一个或多个渲染上下文，必须使用脚本来完成实际的绘图任务 canvas基本使用 相比于 img 元...
Canvas使用详细教学：从基础绘图到进阶动画再到实战（海报生成、Flappy Bird 小游戏等），掌握绘图与动画的秘诀
最新发布
JINGWHALE
05-27 382
本文从基础绘图到进阶动画再到实战（海报生成、Flappy Bird 小游戏等），详细介绍了Canvas基础绘图方法、颜色与样式、图像操作、动画等内容，让你掌握Canvas绘图与动画的秘诀。
canvas基本用法
热门推荐
编程界明世隐的博客
01-14 1万+
首先创建canvas元素 <canvas id="canvas" width="150" height="150"></canvas> width和height 也可以不指定，canvas会初始化宽度为300像素和高度为150像素 可以用CSS来指定这两个值，但如果css尺寸与初始画布的比例不一致，它会出现扭曲，所以官方建议用js来设置 width和height这两个属性。 var canvas = document.getElementById('canvas'); .
canvas基础使用1【入门教程】
杨树林er的博客
08-01 883
canvas基础使用，canvas入门教程，从0开始快速入门
canvas的使用方法
weixin_46560512的博客
11-08 3352
    之前学习canvas的时候就觉得canvas和一般的节点有一点不一样，现在重新看了一下，结合大佬们的提示，我又来了自导自演一波，不对的地方还希望大家斧正.     canvas对我来说，是用在web前端和小程序，我接触前端比较少，就主要说一下web方面的吧（小程序直接动态渲染就行）。总体上来说，和一般标签一样，有以下两种方法：     方法一，使用canvas标签+id/class来渲染，其动态变化的实现需要用到getComputedStyle函数，这个函数的用法是，得到初始化的样式 ...
tkinter画图Canvas应用实例
12-22
在这个特定的示例中，我们关注的是`tkinter.Canvas`组件，它提供了一种在窗口内绘制图形的方法。`Canvas`是一个可交互的画布，允许你在其上创建各种图形元素，如线条、矩形、椭圆、图像等。 首先，创建`Canvas`对象...
HTML5 Canvas 应用
08-16
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页...通过学习和熟练掌握Canvas API，我们可以创建出富有创新性和吸引力的网页应用。而实践中的应用案例和源码分析，则是提升技术水平和理解能力的有效途径。
canvas画布的简单应用
z983002710的博客
07-29 833
canvas画布的简单应用
使用Canvas建立应用程序的欢迎界面
04-17
使用低级用户界面技术制作j2me应用程序的欢迎界面的方法
canvas工具
03-30
用于将svg格式的图像精准转换至canvas画布中的工具，例子用法参考博文：http://blog.csdn.net/lkmtao/article/details/44753925
基于HTML5 Canvas和jQuery 的画图工具的实现
08-13
基于HTML5 Canvas和jQuery 的画图工具的实现 参考博文： http://blog.csdn.net/luanlouis/article/details/38490589
Canvas 应用
lanyue622的专栏
01-13 338
Canvas应用，主要是运用HTML5 canvas来实现的各种功能和效果。
canvas-基本应用－例子2
程序猿的成长笔记
06-30 343
学习来源于 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage simple canvas{ border:1px dashed black; } A simple e
快应用---组件（canvas续集）
diliedou4174的博客
07-24 201
b）裁切 裁切路径，就是用clip绘制一个不可见的图形。一旦设置好裁切路线，那么你在画布上新绘制的所有内容都将局限在该区域内，区域以外进行绘制时没有任何效果的；已有内容不受影响； 10）变形 到目前为止，我们所有的绘制都是基于标准坐标系来绘制的； 标准坐标系的特点是：a...
canvas的基本应用
weixin_34399060的博客
06-05 66
html5的canvas元素使用JavaScript在网页上绘制图像 画布是一个矩形区域，可以控制其每一个像素 canvas拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。 HTML添加canvas元素 规定元素的ID，宽度和高度 <canvas id="canvas" width="200" height="100"></canvas> ...
Html5中canvas的一些使用
sun
05-31 1万+
   最近在研究HTML5，发现其中的canvas用途很广。不但可以绘制图形，还可以制作图片线性渐变，而且还能渲染文字做成特效。觉得挺有趣，于是把学习的内容记录起来了。     1.绘制圆形图  Html代码：   &lt;canvas id="roundness" width="600" height="300"&gt;                                      ...
CSS3滤镜及Canvas.docx
11-26
在上述示例中，通过JavaScript操作Canvas元素，读取图片，应用sepia滤镜，然后将处理后的图像绘制回目标元素，以此达到类似CSS3滤镜的效果。 在旧版IE（5.5到9）中，滤镜效果通常依赖于其特有的滤镜属性，如`filter...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值