Web前端-html 5—CANVAS、进度条

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

进度条

<progress ></progress>
<progress value="0.5"></progress>
<progress min="0" max="100" value="10"></progress>

<hr>
<progress id="tag" min="0" max="100" value="0"></progress><span></span>
<button>点击</button>
<script>
     pg = document.getElementById("tag")
     // setInterval()
     // for()
    document.getElementsByTagName("button")[0].onclick = function () {
       var time=setInterval(function () {
            console.log( pg.value);
            pg.value+=1
            pg.nextElementSibling.innerText = pg.value
            if(pg.value>=100){
                clearInterval(time)
            }
           },100)
    }
</script>

h5新增加的两种获取元素的方式
  一单  一组

<script>
    // document.querySelector("选择器")
    // console.log(document.querySelector("div"));
    // console.log(document.querySelector("#tag"));
    // console.log(document.querySelector(".a"));
    // console.log(document.querySelector("[id]"));
    console.log(document.querySelectorAll(".a"));

</script>

canvas（画布）

默认有自己的大小： 300 * 150
兼容 ：当浏览器版本过低的时候则无法解析该版本 会显示中键的文本，若正常解析则不会显示文本

canvas ：就是在通过js 操控内容  绘画

canvas:好 就只有一个元素，剩余都是在通过js绘制效果
       不好： canvas 会值的内容效果无法进行dom操作

canvas标签的本质：行内块

canvas 绘制注意 ：当canvas 的大小设置的时候我们一般不通过样式设置，属性设置

    * 在js 操控canvas 的时候：
    *    1 获取canvas 对象 （可以作为一个画板）
    *    2 通过canvas 对象或去当前的这个canvas对象的上下文对象 （画笔）
    *    3 该“画笔”对象  在画板上绘制内容
    *
    *  注意：平面效果  2d

<style>
    canvas {
        /*width: 500px;*/
        /*height: 500px;*/
        border: 1px solid #000;
    }
</style>

<!--<canvas >-->
<canvas width="500" height="500">
    您的浏览器版本过低，请更新
</canvas>
a
<script>
    /*
    * 在js 操控canvas 的时候：
    *    1 获取canvas 对象 （可以作为一个画板）
    *    2 通过canvas 对象或去当前的这个canvas对象的上下文对象 （画笔）
    *    3 该“画笔”对象  在画板上绘制内容
    *
    *  注意：平面效果  2d
    * */

    var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")

    ctx.fillRect(100,100,50,50)

</script>

canvas绘制线

线的绘制：1要有下笔点 2线走过的轨迹

  var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")
    /*
    * 线的绘制：1要有下笔点 2线走过的轨迹
    *
    * */
         ctx.moveTo(0, 0); //x，y 坐标
         ctx.lineTo(500, 500)
     //   此时只是绘制出线的轨迹，：1描绘   2 填充
         ctx.stroke()
             ctx.moveTo(100,100);
             ctx.lineTo(200,200);
             ctx.lineTo(200,100);
             ctx.lineTo(100,100);
    //        描绘
                 ctx.stroke()
     //      填充
                 ctx.fill()

当不给定闭合点的时候，若此时是用的是填充的效果则会自动填满闭合区域内

  var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")
 ctx.moveTo(100,100);
     ctx.lineTo(200,200);
     ctx.lineTo(200,100);
     // ctx.fill()
      ctx.stroke()

快速的自动闭合 

 var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")
 ctx.moveTo(100,100);
     ctx.lineTo(200,200);
     ctx.lineTo(200,100);
     ctx.closePath(); //闭合路径  下笔的那个点
     ctx.stroke()

设置线的宽度，注意：修改线宽要在使用之前进行

 var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")
ctx.lineWidth = "10"   //生效
    ctx.moveTo(100,100);
    ctx.lineTo(200,200);
    ctx.lineTo(200,100);
    ctx.closePath();
    ctx.lineWidth = "10"  //生效
    ctx.stroke();
    ctx.lineWidth = "10"  //不生效

设置多条线  最后统一描绘 

  var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")
ctx.lineWidth = 10;
    ctx.moveTo(100,100);
    ctx.lineTo(400,100);
   
    ctx.moveTo(100,130);
    ctx.lineTo(400,130);
    ctx.stroke()

 给笔设置颜色 （颜色值都可以有哪几种 css 部分的颜色表现都可以）

  var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")
    ctx.strokeStyle = "#ff0";  // 颜色单词 ，#fff  #ffffff  rgb（） rgba（）
    ctx.moveTo(100, 130);
    ctx.lineTo(400, 130);
    ctx.stroke()

 开启以个新的状态 ,以为只有一个状态,（想让状态之间有不同的表现，此时在就需要开启先的新的状态）路径

  var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")
  ctx.beginPath();
     ctx.lineWidth = 10;
     ctx.strokeStyle = "#f00";
     ctx.moveTo(100,100);
     ctx.lineTo(400,100);
     ctx.stroke();
     ctx.beginPath();
     ctx.lineWidth = 40;
     ctx.strokeStyle = "#ff0";
     ctx.moveTo(100,150);
     ctx.lineTo(400,150);
     ctx.stroke();

状态的同一化:此时设置的是描绘的样式，但是最终你使用的是填充   一一对应 

      var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")
         ctx.strokeStyle = "#ff0";
          ctx.fillStyle = "#ff0";
          ctx.moveTo(100,100);
          ctx.lineTo(400,100);
          ctx.lineTo(400,400);
          ctx.fill()
     ctx.stroke()

在线宽的问题(基线问题) 

 var mycanvas = document.querySelector("canvas")
    var ctx = mycanvas.getContext("2d")
 ctx.strokeStyle = "red";
    ctx.lineWidth = 20;
    ctx.moveTo(100, 0);
    ctx.lineTo(400, 0);
    ctx.lineTo(400, 400);
    ctx.closePath();
    ctx.stroke();
    // ctx.fill();

设置线的两端样式 

butt 默认样式

    var a = document.querySelector("#tag_a");
    var actx = a.getContext("2d");

    actx.lineWidth = 20;
    actx.moveTo(100, 100);
    actx.lineTo(400, 100);
    //设置先的两端样式 :
    //butt 默认样式
    // actx.lineCap = "butt";
    actx.stroke();

round 两端是圆弧
   actx.lineWidth = 20;
    actx.moveTo(100, 130);
    actx.lineTo(400, 130);
    //设置先的两端样式 :
    //round 两端是圆弧
    actx.lineCap = "round";
    actx.stroke();
square两端是方块
    actx.lineWidth = 20;
    actx.moveTo(100, 160);
    actx.lineTo(400, 160);
    //设置先的两端样式 :
    //square两端是方块
    actx.lineCap = "square";
    actx.stroke();

绘制线焦点样式

 actx.lineWidth = 10;
    actx.moveTo(100, 100);
    actx.lineTo(400, 100);
    actx.lineTo(100, 200);
    //默认是尖角
    // actx.lineJoin = "miter";
    //折角部分是个圆角
    // actx.lineJoin = "round";
    //平角
    actx.lineJoin = "bevel";
    actx.stroke();

制矩形 

x，y 表示矩形的左上角
ctx.rect(x坐标，y坐标，宽度，高度)
ctx.rect(100,100,100,100);

 当会值矩形的一个更加简便的写法
ctx.fillRect(10,10,200,300);
ctx.strokeRect(10,10,200,300);

<canvas width="500" height="500" id="tag_a"></canvas>
<script>
    var a = document.querySelector("#tag_a");
    var ctx = a.getContext("2d");
    //绘制矩形  x，y 表示矩形的左上角
    // ctx.rect(x坐标，y坐标，宽度，高度)
    // ctx.rect(100,100,100,100);
    // // ctx.fill();
    // ctx.stroke();

</script>

绘制弧

ctx.arc(250,250,200,0,Math.PI/2,false);
ctx.arc(x,y,半径,起始弧,结束弧,方向);
<canvas width="500" height="500" id="tag_a"></canvas>
<script>
    var a = document.querySelector("#tag_a");
    var ctx = a.getContext("2d");
    ctx.moveTo(250,250);
    ctx.arc(250,250,200,0,Math.PI/2,false);
    // ctx.lineTo(250,250);
    // ctx.closePath();
    ctx.stroke();
    ctx.fill()

</script>

清除绘制内容

x,y   w,h 清除的矩形大小
ctx.clearRect(250,250,100,100)
<script>
    var a = document.querySelector("#tag_a");
    var ctx = a.getContext("2d");
     ctx.fillRect(100,100,300,300);
     //x,y   w,h 清除的矩形大小
     ctx.clearRect(250,250,100,100)
</script>

绘制文字

参数讲解：1 绘制文字内容   绘制起始点坐标 x  y
ctx.fillText("好好学习，天天向上！！！",200,100);
ctx.strokeText("好好学习，天天向上！！！",100,200);
描绘文字    填充文字
// ctx.fillText("你好？",100,100);
// ctx.strokeText("我好！",100,120);
设置文字的大小  注意点：字体的样式   ；设置有顺序  显示大小  在是样式
 ctx.font ="bold 50px '宋体'";
    ctx.fillText("你好？",100,100);
    // ctx.strokeText("我好！",100,120);

  文本内容基线


​​ textBaseLign:设置或返回在绘制文本时使用的当前文本基线。


 值                   描述
alphabetic     默认。文本基线是普通的字母基线。
top          文本基线是 em 方框的顶端。
hanging      文本基线是悬挂基线。         知道
 middle       文本基线是 em 方框的正中。
 ideographic  文本基线是表意基线。         知道
bottom       文本基线是 em 方框的底端。

中文  引文 常用常用的是：  默认  top  middle  bottom
deographic    hanging基本差不多

<canvas id="a" width="500" height="500" style="border: 1px solid red">浏览器不支持canvas</canvas>
<script>

    var mcanvas = document.querySelector('#a');
    var ctx = mcanvas.getContext('2d');
    //绘制坐标
    ctx.moveTo(0,250);
    ctx.lineTo(500,250);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(250,0);
    ctx.lineTo(250,500);
    ctx.stroke();

//    辅助
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.font="30px '宋体'";

//   研究基线
    ctx.textBaseline = "bottom";
    ctx.fillText("AbcDghj",250,250);

</script>

对齐方式

研究基线
ctx.textAlign = "start";
ctx.textAlign = "end";

 ctx.textAlign = "center";
ctx.textAlign = "left";
ctx.textAlign = "right";

 ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("AbcDghj",250,250);

 

yanghainan0318
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas 画进度条
Amoslb
12-01 375
template> <div class="circle-wrapper"> <canvas id="canvas"></canvas> </div> </template> <script> export default { mounted() { this.percent = this.options.percent; this.radius = this.options.radius; this.widt
html5 canvas制作圆形水波进度条动画特效
07-29
纯canvas制作的水波纹进度条动画，支持拖到设置水波进度条大小代码
html5 canvas画进度条
weixin_30578677的博客
03-09 123
这个ie8的兼容是个问题，ie8 的innerHTML有问题啊，添加两个附件吧 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <ti...
HTML5 Canvas绘制环形进度条
java_zhaoyanli的专栏
05-25 1567
canvas中没有直接绘制圆的方法，但有一个绘制弧线的context.arc方法， arc()方法介绍 context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参数说明： x: 圆的中心的 x 坐标 y: 圆的中心的 y 坐标 r: 圆的半径 sAngle: 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度
6个非常经典Web前端使用的炫丽进度条（一）
08-18
在线效果：http://ynif.v099.10000net.cn/demo/jindu/1/jindu/index.html
【前端素材】模板-多种实用圆弧进度条.zip
最新发布
04-04
Canvas 动画：通过 HTML5 Canvas 元素绘制图形，利用 JavaScript 控制绘制过程，实现高度可定制化的动画效果，适用于需要实时渲染的复杂动画场景。 WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以...
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
10-16
在本文中，我们将深入探讨如何使用JavaScript和HTML5的Canvas API来实现一个简单的加载条（进度条）功能。首先，我们需要了解Canvas的基本概念。Canvas是HTML5中的一个元素，它提供了一个二维绘图表面，允许开发者...
WEB前端实现裁剪上传图片功能
09-01
在WEB前端开发中，实现裁剪上传图片功能是一项常见的需求，尤其在社交媒体、电商网站以及个人博客等场景中。本文将详细介绍如何实现这一功能，主要包括拖拽显示图片、图片压缩、图片裁剪编辑以及上传与进度显示这四...
HTML5面试题面试整理（含答案）最新版.docx
06-10
HTML5 面试题总结 一、Doctype 的作用 Doctype（文档类型）是 HTML 文档的开头部分，位于 `<html>` 标签之前，告知浏览器的解析器，用什么文档类型规范来解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以...
canvas环形倒计时组件的示例代码
09-27
在Web开发中，Canvas是一个非常重要的HTML5元素，它允许开发者通过JavaScript来绘制图形，提供丰富的动态视觉效果。本文将深入探讨如何利用Canvas实现一个环形倒计时组件，并提供详细的示例代码。 首先，环形倒计时...
canvas实现动态加载进度条
04-12
用canvas实现动态进度条加载动画，模拟动态监测数据
web前端javascript写出进度条效果
caiyyu的博客
06-26 499
##效果展示： 个人认为良性的互动与循序渐进的练习，才是学习好的好习惯。我也会以此践行我的学习总结之路。 ###初步布局与样式： ```javascript style样式： .box { width: 200px; border: 1px solid black; border-radius: 10px; overflow: hidden; } .inner { width: 200px; ...
html5倒计时进度条,HTML5实现方形及圆形倒计时进度条
weixin_39651735的博客
06-05 397
js代码var Utils = {//TODO:注意：0 == ''为trueisNull: function (obj) {if (typeof obj == 'undefined' || obj == null || obj == 'null' || obj == 'NULL' || obj == '') {return true;} else {return false;}},};var T...
html进度条选择进度,H5效果篇--进度条的实现
weixin_35327612的博客
06-03 2453
为了演示方便，在第一个例子中，我们通过Javascript去控制时间从而不断地更新进度，并且允许用户通过点击按钮开始进度条的更新，一旦进度条开始更新，则按钮变得不可点击。如果进度条完成的话，则又可以点击按钮。下面我们开始一步步实做这个效果：1)创建HTML5 页首先创建基本的HTML 5基本框架页2) 增加进度条标签首先，在body部分，添加如下的进度条的标签：Task progress:HTML...
[前端案例]用HTML、JS、CSS实现一个进度条，加上动画效果
小张Python
05-21 1735
进度条最终效果如下，上面是一个进度条进度，进度通过线条颜色来控制：蓝色表示已达到该进度，黑色表示未达到；下方是两个按钮来控制整体进度条的进度：点击Prev按钮减少进度，Next来增加进度；首先创建一个 index.html，补充页面中的标签元素</</</</</</</</</</</</</</</</</
几个Web前端经典使用的炫丽进度条（下）
dsgru的博客
08-13 754
4.漂亮的jQuery橙色进度条插件 能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。      源码下载/   在线演示   5.  HTML5实现简单进度条效果  源码下载/   在线演示   6. CSS3个人技能进度条  源码下载/   在线演示 ...
几个Web前端经典使用的炫丽进度条（上）
08-13 971
1.  jQuery带圆形进度条倒计时   源码下载  /  在线演示     2. jQuery网站页面加载进度条   源码下载 /  在线演示 3.13款页面加载样式特效    源码下载/   在线演示
前端-进度条实践
gcc_java的博客
12-26 786
最近有需求画横向展示的柱状图，插件开始使用了echarts，实现效果不理想，最后改为表格和进度条配合，完成柱状图（动态的） 关键标签：&lt;progress&gt; 属性： max: 规定任务一共需要多少工作，就是柱状图100%时对应的值 value: 规定已经完成了多少任务，即柱状图的长度 思路：修改 progress 标签样式，完成横向柱状图。 注意：样式要兼容各个浏览器 例如...
纯css实现进度条效果
weixin_30599769的博客
03-11 686
　　去年7月份做一个公司商城的微信页面（微信用的chrome内核）需要写一个提示返现进度的进度条效果。 　　一个完整的进度条效果其实可以拆分一下： 　　　　一段背景； 　　　　一小段的静态的斜纹进度条； 　　　　斜纹进度条用线性渐变linear-gradient 类实现，原理很好理解，2个参数： 　　　　　　1、角度； 　　　　　　2、关键点（包含2个参数，1是颜色，2是长度位置） ...
vue-html2canvas Vue3 使用
08-01
在Vue3中使用vue-html2canvas，你需要先安装依赖包html2canvas和vue-html2canvas。可以通过以下命令进行安装： ``` npm install html2canvas vue-html2canvas ``` 安装完成后，在需要使用的页面中引入组件，并注册...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值