精华内容
下载资源
问答
  • canvas案例
    2021-01-16 19:17:31

    canvas

    1. 是 HTML5 新增的元素,可用于通过使用 JavaScript 中的脚本来绘制图形。例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染。
    2.Canvas 能干什么
    图表
    小游戏
    活动页
    特效
    背景等
    3.方法 描述
    fill() 填充路径
    stroke() 描边
    arc() 创建圆弧
    rect() 创建矩形
    fillRect() 绘制矩形路径区域
    strokeRect() 绘制矩形路径描边
    clearRect() 在给定的矩形内清除指定的像素
    arcTo() 创建两切线之间的弧/曲线
    beginPath() 起始一条路径,或重置当前路径
    moveTo() 把路径移动到画布中的指定点,不创建线条
    lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
    closePath() 创建从当前点回到起始点的路径
    clip() 从原始画布剪切任意形状和尺寸的区域
    quadraticCurveTo() 创建二次方贝塞尔曲线
    bezierCurveTo() 创建三次方贝塞尔曲线
    isPointInPath() 如果指定的点位于当前路径中,则返回 true,否则返回 false

    案例: 页面上或一条线

      methods: {
        canvas() {
          //1. 获取节点
          var myCanvas = document.getElementById("demo");
          //2.获取绘图工具箱-->即创建画笔
          var ctx = myCanvas.getContext("2d");
          //3.把画笔移动到起点
          ctx.moveTo(10, 10);
          //4.绘制直线-->画笔的终点
          ctx.lineTo(300, 300);
          //5.描边
          ctx.stroke();
         // 6 关闭当前的绘制路径
              cxt.closePath();
        },
      },
    };
    

    项目使用:

    效果
    5列选项,每列限选一个。
    在这里插入图片描述

    <template>
      <div class="custom-tree-container">
        <div class="marginBottom">
          <el-card>
            <div class="queryConditions">
              <div
                class="item"
                v-for="(item, index) in queryConditionsList"
                :key="item.code"
              >
                <div class="left-content">
                  <div class="head-top">{{ item.name }}</div>
                  <div class="content-bottom">
                    <div
                      v-for="(item2, index2) in item.list"
                      :key="index2"
                      class="item"
                      @click="queryConditionsItemClick(index, index2)"
                    >
                      {{ item2.name }}
                    </div>
                  </div>
                </div>
                <canvas
                  style="width: 40px; height: 100%"
                  :id="'canvas' + index"
                  :key="'canvas' + index"
                ></canvas>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </template>
    
    <script>
    let id = 1000;
    
    export default {
      data() {
        return {
          activeName: "asphalt",
          queryConditionsList: [
            {
              name: "技术等级",
              code: "technicalGrade",
              list: [
                {
                  name: "高速、一级公路",
                  code: "11",
                },
                {
                  name: "二、三四级公路",
                  code: "12",
                },
              ],
            },
            {
              name: "交通量",
              code: "traffic",
              list: [
                {
                  name: "重>=8000",
                  code: "11",
                },
                {
                  name: "中8000→3000",
                  code: "12",
                },
                {
                  name: "轻<3000",
                  code: "13",
                },
              ],
            },
            {
              name: "PCI",
              code: "PCI",
              list: [
                {
                  name: "优良>=90",
                  code: "11",
                },
                {
                  name: "中90→80",
                  code: "12",
                },
                {
                  name: "次差<80",
                  code: "13",
                },
              ],
            },
            {
              name: "RQI",
              code: "RQI",
              list: [
                {
                  name: "优良>=90",
                  code: "11",
                },
                {
                  name: "中90→80",
                  code: "12",
                },
                {
                  name: "次差<80",
                  code: "13",
                },
              ],
            },
            {
              name: "PSSI",
              code: "PSSI",
              list: [
                {
                  name: "高>=70",
                  code: "11",
                },
                {
                  name: "低<70",
                  code: "12",
                },
              ],
            },
          ],
          queryConditions: [],
        };
      },
    
      methods: {
        queryConditionsItemClick(index, index2) {
          this.$set(this.queryConditions, index, index2);
          this.setQueryConditionsCanvas(index, index2);
        },
        setQueryConditionsCanvas(index, index2) {
          this.queryConditions.forEach((item, j) => {
            if (item != undefined) {
              var c = document.getElementById("canvas" + j);
              var cxt = c.getContext("2d");
              c.width = c.width;
              cxt.strokeStyle = "red";
              cxt.lineCap = "round";
              //注意,Canvas的坐标系是:Canvas画布的左上角为原点(0,0),向右为横坐标,向下为纵坐标,单位是像素(px)。
              //开始一个新的绘制路径
              cxt.beginPath();
              //定义直线的起点坐标为(10,10)
              cxt.moveTo(0, 55 + item * 40);
              //定义直线的终点坐标为(50,10)
              cxt.lineTo(300, 55 + this.queryConditions[j + 1] * 40);
              //沿着坐标点顺序的路径绘制直线
              cxt.stroke();
              //关闭当前的绘制路径
              cxt.closePath();
            }
          });
        },
      },
    };
    </script>
    
    <style lang="less" scoped>
    .queryConditions {
      display: flex;
      & > .item {
        width: 11.5%;
        display: flex;
        .left-content {
          flex: 1;
          .head-top {
            text-align: center;
            padding: 20px 0;
            color: #999;
            font-size: 20px;
          }
          .content-bottom {
            .item {
              border: 1px solid #903939;
              height: 50px;
              line-height: 50px;
              border-radius: 8px;
              text-align: center;
              margin-top: 15px;
              font-size: 15px;
              cursor: pointer;
              &:first-child {
                margin-top: 0;
              }
              &.active {
                color: red;
              }
            }
          }
        }
      }
    }
    </style>
    
    更多相关内容
  • canvas案例

    2018-04-13 11:03:04
    <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。
  • 内容概要:canvas案例,可拖拽的小球。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
  • canvas案例demo

    2016-11-23 14:33:10
    里面有关于canvas的使用,非常详细的代码注释,绘制直线,方框,方块,弧线,渐变,对图像像素数据进行操作,图片变灰,取二值,取反色。可以直接看效果
  • 内容概要:canvas案例,色盘、颜色过渡。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
  • canvas案例笔记

    2018-07-03 21:41:17
    canvas基础教程案例笔记 Canvas: 这是画布标签。 ctx: 画笔 在JS中通过元素.getContext("2d") 获取画笔 坐标系: 普通元素有一个定位坐标系 canvas的坐标系叫做绘图坐标系。 ctx可以认为就是坐标系。 坐标系的原点...
  • canvas案例,判断鼠标位置是否在物体内。html+js实现。可直接运行
  • 内容概要:canvas案例,减速下落的物体。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
  • 内容概要:canvas案例,指南针。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手
  • 内容概要:canvas案例,弹性小球下落实现。(弹跳效果) 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
  • 内容概要:下落小球碰撞物体运动轨迹,简单3D弹球基础逻辑。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
  • 微信小程序canvas案例,类似直播刷赞We-Canvas-master.zip
  • 内容概要:canvas案例,检测碰撞、检测运动物体是否碰撞。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
  • 内容概要:canvas案例,闪烁的物体、缩放物体实现闪烁。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
  • OMNeT++ Canvas案例精讲

    2020-08-06 18:00:16
    本课程详细介绍的OMNeT++的Canvas仿真实例,详解讲解了通过使用Canvas的API进行2D仿真图形的动态绘制以及通过cPolyFigure,cImageFigure,cTextFigure等类的使用来实现仿真的移动效果,通过本课程的学习应用OMNeT++进行...
  • html2canvas案例

    2017-02-09 11:07:23
    解决html2canvas截图模糊的问题
  • 所以,如果你想学习Canvas画图,你必须要有Javascript基础。 另外,画图嘛,总有一些图像方面的术语和知识点,所以如果你有过做图或美工经验,学习Canvas会更容易。 Canvas,意为画布也。而Html5中的Canvas也真的跟...
  • 关于canvas和canvas案例

    2022-04-07 10:52:51
    Canvas常见API 1.this.canvas.getContext(‘2d’) 初始化画布 // 获取canvas元素 this.canvas = document.getElementById('tutorial') // 获取绘制二维上下文 this.ctx = this.canvas.getContext('2d') 2.this.ctx...

    Canvas常见API

    1.this.canvas.getContext(‘2d’)
    初始化画布

    // 获取canvas元素
    this.canvas = document.getElementById('tutorial')

    // 获取绘制二维上下文

    this.ctx = this.canvas.getContext('2d')

    2.this.ctx.moveTo ,this.ctx.lineTo(150, 50)

    moveTo 移动画笔到具体某个位子 lineTo 画线条到具体某个位置

    this.ctx.moveTo(50, 150) // 移动画笔到 50,150 坐标处
    this.ctx.lineTo(150, 50)

    3.this.ctx.storkeStyle , this.ctx.stroke()

    canvas storkeStyle描边的样式设置,stroke调用次方法才能实现画线条

    this.ctx.storkeStyle = '#000' // 黑色
    this.ctx.storkeStyle = '#000'// 黑色
    this.ctx.storkeStyle= 'rgba(255,255,255,1.0)' // 红色
    this.ctx.storke()

    4.this.ctx.fillStyle , this.ctx.fill()

    canvas fillStyle 填充的样式设置,fill调用次方法才能实现画填充物—一般都是作用于有形状的物体

    this.ctx.fillStyle = '#000' //
    this.ctx.fillStyle = '#000'//
    this.ctx.fillStyle= 'rgba(255,255,255,1.0)'
    this.ctx.fill()

    5.this.ctx.fillRect() , this.ctx.storkeRect()

    6.this.ctx.beginPath()
    只要绘制一个线段或者一个原点就得写在这里面
    在这里插入图片描述

    6.this.ctx.lineCap() , this.ctx.lineJoin() , this.ctx.lineWidth()

    lineCap 设置线端点的样式 lineJoin 线连接点的样式 lineWidth 线宽度

    this.ctx.lineCap = 'butt' //平直边缘
    this.ctx.lineCap = 'round' //端点是半圆
    this.ctx.lineCap = 'square' //端点时加了一个以线宽为长,一半线宽为宽的矩形 也就是说线条会变长
    this.ctx.lineCap = 'miter' //默认值
    this.ctx.lineCap = 'bevel' // 连接处是对斜角
    this.ctx.lineCap = 'round' //为圆形连接处
    this.ctx.lineWidth = '10' //平直边缘

    // 开始绘制图形
    this.ctx.lineCap = 'butt
    this.ctx.lineJoin = 'miter
    this.ctx.lineWidth = '100
    this.ctx.moveTo(50, 150)
    this.ctx.lineTo(250, 100)
    this.ctx.stroke()

    还有很多请看这:https://juejin.cn/post/6969545452622446605
    转自:https://juejin.cn/post/6969545452622446605

    canvas实现验证码功能

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>caseydemo</title>
      </head>
      <body>
      <canvas id="canvas" width="170" height="60"></canvas>
      <a href="#" id="changeImg">看不清,换一张</a>
      <script>
        /**生成一个随机数**/
        function randomNum(min,max){
          return Math.floor( Math.random()*(max-min)+min);
        }
        /**生成一个随机色**/
        function randomColor(min,max){
          var r = randomNum(min,max);
          var g = randomNum(min,max);
          var b = randomNum(min,max);
          return "rgb("+r+","+g+","+b+")";
        }
        drawPic();
        document.getElementById("changeImg").onclick = function(e){
          drawPic();
        }
     
        /**绘制验证码图片**/
        function drawPic(){
          var canvas=document.getElementById("canvas");
          var width=canvas.width;
          var height=canvas.height;
          var ctx = canvas.getContext('2d');
          ctx.textBaseline = 'bottom';
     
          /**绘制背景色**/
          ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
          ctx.fillRect(0,0,width,height);
          /**绘制文字**/
          var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
          for(var i=0; i<4; i++){
            var txt = str[randomNum(0,str.length)];
            ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
            ctx.font = randomNum(25,50)+'px SimHei'; //随机生成字体大小
            var x = 20+i*25;
            var y = randomNum(45,55);
            var deg = randomNum(-45, 45);
            //修改坐标原点和旋转角度
            ctx.translate(x,y);
            ctx.rotate(deg*Math.PI/180);
            ctx.fillText(txt, 0,0);
            //恢复坐标原点和旋转角度
            ctx.rotate(-deg*Math.PI/180);
            ctx.translate(-x,-y);
          }
          /**绘制干扰线**/
          for(var i=0; i<4; i++){
            ctx.strokeStyle = randomColor(40,180);
            ctx.beginPath();
            ctx.moveTo( randomNum(0,width), randomNum(0,height) );
            ctx.lineTo( randomNum(0,width), randomNum(0,height) );
            ctx.stroke();
          }
          /**绘制干扰点**/
          for(var i=0; i<100; i++){
            ctx.fillStyle = randomColor(0,255);
            ctx.beginPath();
            ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
            ctx.fill();
          }
        }
      </script>
      </body>
    </html>
    

    转自:https://blog.csdn.net/caseywei/article/details/83658214

    展开全文
  • html2canvas案例解决模糊不清及滚动下来问题(已测试,可直接应用到项目中)
  • 为大家介绍一款JS截图插件html2canvas.js,它可以通过纯JS对浏览器端经行截屏,下面就为大家介绍一下html2canvas.js属性和具体使用方法,并为大家提供了一个实例
  • canvas案例:绘制虚线

    2021-03-15 00:02:51
    } </style> </head> <body> <canvas width="500" height="500"></canvas> <script> let q=document.querySelector("canvas"); let w=q.getContext("2d"); w.moveTo(100,100); w.lineTo(400,100); w....

    课程目标:

    1.绘制虚线的步骤是怎么样的?
    2.绘制虚线需要用到什么canvas方法?
    3.虚线的变换?

    1.绘制虚线的步骤是怎么样的(JS)?

    在这里插入图片描述

    第一步:先拿到canvas对象.
    在这里插入图片描述

    第二步:通过getContext方法拿到另一个对象在这里插入图片描述因为这另一个对象才能画图.
    在这里插入图片描述

    第三步:

    第一步:先画一个点moveTo。
    第二步:再画另一个点lineTo。
    第三步:再想另一个点的宽度如何
    第四步:再想想连起来的时候的颜色如何。

    第四步:

    在这里插入图片描述
    虚线的核心在这里。
    第一步:先5px10px5px10px的重复着。效果:
    在这里插入图片描述
    第二步:getLineDash是获取重复之前的那段的.
    第三步:在这里插入图片描述
    负数为左移。正数为右移。
    第五步:连起来。在这里插入图片描述

    2.绘制虚线需要用到什么核心canvas方法?

    在这里插入图片描述

    3.虚线的变换?:

    在这里插入图片描述
    这样的话,是这样的。
    在这里插入图片描述
    代表和两个参数是相反的。并且是有无有无的进行着的.

    以下代码:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title></title>
    	<style>
    		*{padding: 0px;margin: 0px;}
    	</style>
    </head>
    <body>
    	<canvas  width="500" height="500"></canvas>
    	<script>
    		let q=document.querySelector("canvas");
    		let w=q.getContext("2d");
    		w.moveTo(100,100);
    		w.lineTo(400,100);
    		w.lineWidth=30;
    		w.strokeStyle="red";
    		w.setLineDash([5,10]);
    		console.log(w.getLineDash());
    		w.lineDashOffset=-50;
    		w.stroke();
    	</script>
    </body>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title></title>
    	<style>
    		*{padding: 0px;margin: 0px;}
    	</style>
    </head>
    <body>
    	<canvas  width="500" height="500"></canvas>
    	<script>
    		let q=document.querySelector("canvas");
    		let w=q.getContext("2d");
    		w.moveTo(100,100);
    		w.lineTo(400,100);
    		w.lineWidth=30;
    		w.strokeStyle="red";
    		w.setLineDash([5,10,20]);
    		console.log(w.getLineDash());
    		w.lineDashOffset=-50;
    		w.stroke();
    	</script>
    </body>
    </html>
    

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 在页面上放置一个canvas元素 就相当于放置了一块画布 可以绘制路径 矩形 圆形 字符 图像 属性: width 默认值 300px height 默认值 150px 注意点:canvas需要写闭合标签 <canvas></canvas> 一般...

      canvas 属于html元素 H5新元素 需要结合js ,主要用来绘制2d图形
        在页面上放置一个canvas元素 就相当于放置了一块画布
        可以绘制路径 矩形 圆形 字符 图像
        属性:
          width    默认值 300px
          height   默认值 150px
          注意点:canvas需要写闭合标签
          <canvas></canvas>
          一般不建议使用css设置它的宽高
        方法:
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'green';
            ctx.fillRect(10, 10, 20, 20);
          fillRect(x,y,width,height)
              绘制一个矩形图案(填充)
          strokeRect(10, 60, 50, 50)
              绘制矩形边框
          clearRect(10, 10, 100, 100)
            清除指定矩形区域,让清除部分完全透明
          beginPath()
            新建一条路径
            然后通常会使用moveTo去设置你的起始位置
            然后去绘制
          closePath()
            闭合路径
            如果我们绘制的路径自己就是闭合的 那我们不需要调用这个方法
          fill()
            填充路径的内容区域 可以不用 closePath()
          stroke()
            通过线条绘制图形轮廓 需要使用 closePath()

          lineTo()   绘制直线

    绘制圆形:
          arc(x,y,r,startAngle,endAngle,anticlockwise)

            anticlockwise:默认顺时针方向

    注意:arc()函数中表示角的单位是弧度,不是角度。角度与弧度的js表达式:

    弧度=(Math.PI/180)*角度。

          fillStyle()
            控制填充色彩
            颜色值 red #000999 rgb rgba 
          strokeStyle():设置线条色彩

          lineWidth:设置线条粗细

    案例1:利用canvas画一个圆:

    首先在HTML中的body里写基本样式

    <div id="app">

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

      </div>

    然后再写js语句来实现效果

    <script>
      var canvas = $('#canvas')[0];
      // 检查浏览器是否支持canvas
      if (canvas.getContext) {
        // 支持canvas
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(100, 100, 60, 0, 2 * Math.PI);
        ctx.stroke();
      } else {
        console.log("您的浏览器不支持canvas")
      }
    </script>

    案例2:利用canvas画一个三角形

    HTML中结构同上例相同

    js语句如下所示:

    <script>
      var canvas = $('#canvas')[0];
      // 检查浏览器是否支持canvas
      if (canvas.getContext) {
        // 支持canvas
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(75, 50);
        ctx.lineTo(100, 75);
        ctx.lineTo(100, 25);
        ctx.closePath();
        ctx.stroke();
      } else {
        console.log("您的浏览器不支持canvas")
      }
    </script>

    案例3:利用canvas画奥运五环

    分析:若如同案例1的方式直接写5个ctx.arc(),虽然也有五个圆形,但是会因为只有一个画笔造成连线现象(如图1所示),所以先将画一个圆环的过程用函数封装,再调用这个函数五次。调用时,为了实现奥运五环的嵌套效果,要计算好每个环所在的位置,嵌套圆弧的角度等。

    补充:去掉图1中多余 的线条可以用moveTo(圆心(x)+r,圆心(y)),对颜色的更改可以封装个函数进行设置。

                        (图1)

     代码:HTML中的body内容同上例,

    js语句:

            function draw(x,y,r,color){
                
                var canvas=$("canvas")[0];
                var cir=canvas.getContext('2d');
                cir.beginPath();
                cir.strokeStyle=color;
                cir.lineWidth=10;
                cir.moveTo(x+r,y);
                cir.arc(x,y,r,0,2*Math.PI);
                cir.stroke();
            }
            draw(300,300,60,"red");
            draw(400,300,60,"black");
            draw(490,300,60,"green");
            draw(340,380,60,"yellow");
            draw(440,380,60,"blue");

    效果图:

     

     

    展开全文
  • 案例-html2canvas

    2022-04-20 15:59:25
    效果图: 源码: <!doctype html> <html lang="en"> ...html2canvas<...script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <style> <
  • 最近看了三心大佬的canvas教程(发现新玩具),canvas真**好玩(优美中国话),附上三心大佬教程 https://juejin.cn/post/6986785259966857247。废话不多说,上正餐 创建canvas标签 <canvas ref="saveCanvas" ...
  • 一,html页面显示pdf渲染成canvas案例 如下图所示: 1,引入pdf.js <script src="../js/htmlshowPDF/build/pdf.js"></script> <script src="../js/htmlshowPDF/build/pdf.worker.js"></script...
  • 本文将结合面向对象和canvas来模拟太阳系 当然有许多参数不太准确,不过重点是如何使用面向对象和canvas实现效果 侧重点要放在重点上 不是很懂面向对象的小伙伴要先看一下相关的文章,面向对象的编程思想需要用到...
  • 话不多说,上完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <... body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav { ...
  • Canvas</title> <script> var sun = new Image(); var moon = new Image(); var earth = new Image(); function init(){ sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'; moon....
  • 一个简单的canvas案例

    千次阅读 2018-09-11 10:17:36
    2.检测是否支持canvas,有3种方法,案例用第3种:使用引入modernizr.js,到官网www.modernizr.com下载 3.创建画布实例,获取2D上下文 4.drawScreen() 5.标签元素&lt;canvas id="canvas" width=&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,700
精华内容 6,280
关键字:

canvas案例