您的位置:时时app平台注册网站 > web前端 > Canvas基本篇【彩世界网址】

Canvas基本篇【彩世界网址】

2019-11-08 03:57

绘制步骤

基本绘图

彩世界网址 1

虚线
  • 语法:
...
CanvasRenderingContext2D.lineDashOffset = number
CanvasRenderingContext2D.getLineDash()
CanvasRenderingContext2D.setLineDash()

描述:

setLineDash 用于安装开端绘制虚线的偏移量. 数字的正负表示左右偏移.
getLineDash() 与 setLineDash() 方法运用数组描述实线与虚线的长度.
演示

...
ctx.moveTo( 100, 90 );
ctx.lineTo( 100, 110 );
ctx.moveTo( 300, 90 );
ctx.lineTo( 300, 110 );

ctx.moveTo( 100, 140 );
ctx.lineTo( 100, 160 );
ctx.moveTo( 300, 140 );
ctx.lineTo( 300, 160 );

ctx.moveTo( 100, 190 );
ctx.lineTo( 100, 210 );
ctx.moveTo( 300, 190 );
ctx.lineTo( 300, 210 );
ctx.stroke();

ctx.beginPath();
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.stroke();

ctx.beginPath();
ctx.setLineDash( [ 5, 5 ] );
ctx.moveTo( 100, 150 );
ctx.lineTo( 300, 150 );
ctx.stroke();

ctx.beginPath();
ctx.lineDashOffset = -2;
ctx.moveTo( 100, 200 );
ctx.lineTo( 300, 200 );
ctx.stroke();
  1. 获得 canvas 对象.
  2. 调用 getContext 方法, 提供字符串参数 '2d'.
  3. 该方法重临 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
  4. 使用 CanvasRenderingContext2D 对象提供的不二等秘书诀开展绘图.
  5. 主干绘图命令

    • 设置最早绘图的岗位: context.moveTo( x, y ).
    • 设置直线到的职位: context.lineTo( x, y ).
    • 描边绘制: context.stroke().
    • 填充绘制: context.fill().
    • 关掉路线: context.closePath().
    • ####  绘制圆弧

      语法: CanvasRenderingContext2D.arc( x, y, radius. startAngle. endAngle, anticlockwise )

      描述:

      1. 该办法用于绘制后生可畏段弧, 合作伊始点的岗位 与 stroke 方法或 fill 方法可以绘制扇形.
      2. 主意中的前四个参数 x, y 代表绘制圆弧的圆心坐标.
      3. 参数 radius 表示圆弧半径, 单位为弧度.
      4. 参数 startAngle 与 endAngle 代表从前到竣事的角度. 角度以水平向右为 0 弧度, 顺时针为四方向.
      5. 参数 anticlockwise 表示是或不是接收暗许的正向角度, 要是传入 true 表示逆指针为正. 该参数可选.
主干绘图方法

绘制步骤

  • 获得canvas对象.

    • 调用getContext方法, 提供字符串参数'2d'.

    • 该办法再次回到CanvasRenderingContext2D类型的对象. 该目的提供基本的绘图命令.

  • 使用CanvasRenderingContext2D对象提供的办法开展绘图.

    • 主导绘图命令

      • 设置最早绘图的岗位:context.moveTo( x, y ).

      • 安装直线到的职位:context.lineTo( x, y ).

      • 描边绘制:context.stroke().

      • 填充绘制:context.fill().

      • 关掉路线:context.closePath().

    • 制图基本线

       var canvas = document.createElement( 'canvas' );
      
       canvas.width = 500;
      
       canvas.height = 400;
      
       canvas.style.border = '1px dashed red';
      
       document.body.appendChild( canvas );
      
      // 获得 CanvasRenderingContext2D 对象
      
      var context = canvas.getContext( '2d' );
      
      // 设置 起点
      
      context.moveTo( 0, 0 );
      
      // 绘制直线
      
      context.lineTo( 500, 400 );
      
      // 设置 起点
      
      context.moveTo( 0, 400 );
      
      // 绘制直线
      
      context.lineTo( 500, 0 );
      
      // 描边显示效果
      
       context.stroke();
      

canvas 是 HTML5 提供的一个用来突显绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用来体现绘图效果. 最初 canvas 是苹果提议的八个方案, 前些天早就在大多浏览器中达成.。

线型相关属性

安装描边与填充不自然只好动用浅灰的细线. 能够选取一些品质设置其功用

    CanvasRenderingContext2D.lineWidth 设置线宽.
    CanvasRenderingContext2D.lineCap 设置线末端类型.
    CanvasRenderingContext2D.lineJoin 设置相交线的拐点.
    CanvasRenderingContext2D.getLineDash() 获得线段样式数组.
    CanvasRenderingContext2D.setLineDash() 设置线段样式.
    CanvasRenderingContext2D.lineDashOffset 绘制线段偏移量.

案例

...
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo( 100, 250 );
ctx.lineTo( 300, 250 );
ctx.stroke();

彩世界网址 2

canvas 是 HTML5 提供的叁个用来展现绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于呈现绘图效果. 最先 canvas 是苹果提议的三个方案, 前不久早就在大部浏览器中达成.

 都在说技士懒,生活仍旧无法懒的,举个例子洗头、洗脸,当然也席卷是分享咯。上面共享一下本人用H5的新标签canvas绘制的饼状图,颜色是随机生成的,动态生成6等分,笔者还做了随便生成多少的,

stroke 方法
      语法:CanvasRenderingContext2D.stroke()

汇报: 该措施用于连线, 将叙述的全数一点依照内定顺序连接起来.

配上文字,每份所占的比重就显而意见。,那点用在言之有序数据或许蛮好的。图片如下;

getContext 方法
      语法:Canvas.getContext( typeStr )
  • 描述:

    • 该方式用于绘制上下文工具.

    • 假诺是绘制平面图形应用'2d'作为参数, 借使绘制立体图形应用'webgl'.

    • 行使'2d'重回CanvasRenderingContext2D类型的对象.

    • 使用'webgl'重回WebGLRenderingContext类型的对象.

彩世界网址 3

lineTo 方法
  语法:CanvasRenderingContext2D.lineTo( x, y )
  • 描述:

    • 该方式用于安装供给绘制直线的另一个点. 最后描边后会连线当前点和措施参数描述的点.

    中间参数 x, y 表示在坐标系中的地点, 分别是 x 坐标与 y 坐标.

  1. 运用 canvas 标签, 就能够在页面中开采生龙活虎格区域. 能够设置其 width 和 height 设置该区域的尺寸.
  2. 暗许 canvas 的宽高为 300 和 400.
  3. 不要接纳 CSS 的秘诀设置宽高, 应该使用 HTML 属性.
  4. 如果浏览器不扶助 canvas 标签, 那么就能将其表达为 div 标签. 因此平日在 canvas 中放置文本, 以提示顾客浏览器的本事.
  5. canvas 的兼容性极度强, 只要永葆该标签的, 基本效率都同样, 因而不用考虑包容性难点.
  6. canvas 自己不可能绘图. 是应用 JavaScript 来成功绘图. canvas 对象提供了各个绘图用的 api.

canvas 英 ['kænvəs] 美 ['kænvəs] 帆布 画布

骨干采取语法:

直线图形

  • 绘制直线计算坐标.
    • 描边调用 CanvasRenderingContext2D.stroke() 方法.
  • 填充使用 CanvasRenderingContext2D.fill() 方法.
设置相交线的拐点
  语法: CanvasRenderingContext2D.lineJoin = value
  • 描述:

    • 安装两条直线的拐点描述模式. 能够取值 'round', 'bevel', 'miter'(默认)
    • 'round' 使用圆角连接.
    • 'bevel' 使用平切连接.
    • 'miter' 使用直角转.

案例

...
ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.moveTo( 100, 100 );
ctx.lineTo( 200, 200 );
ctx.lineTo( 300, 100 );
ctx.stroke();

ctx.beginPath();
ctx.lineJoin = 'bevel';
ctx.moveTo( 100, 150 );
ctx.lineTo( 200, 250 );
ctx.lineTo( 300, 150 );
ctx.stroke();

ctx.beginPath();
ctx.lineJoin = 'miter';
ctx.moveTo( 100, 200 );
ctx.lineTo( 200, 300 );
ctx.lineTo( 300, 200 );
ctx.stroke();
非零环绕原则
  • 说明:
    • 在 canvas 中选用种种办法描点实际上描述的是二个名称叫路线( path )的东西.
    • 在 canvas 绘图中, 全部描述的东西都以路线, 独有最后填充或描边的时候才会来得出效果.
    • 每叁个门路都以一个状态.
      顺时针加意气风发;逆时针减后生可畏,为零的不渲染

关闭路线

canvas 的基本用法

骨干语法

使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.

默认 canvas 的宽高为 300 和 150.

不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.

如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.

canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.

canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.

canvas 的接纳世界

canvas 的运用世界众多:

游戏,可视化数据(重点),banner 广告,多媒体,未来

模拟仿真,远程操作,图形编辑
结论

1.绘图先要得到上下文, 即绘图工具

2.制图供给设置伊始的坐标

3.制图是先描点, 然后三个贰个每一种连线

4.逐项绘图只好绘制单同样式( 色彩等 )

fill 方法

      语法: CanvasRenderingContext2D.fill()
  • 陈说: 该方法会依据描绘的点的门径来填充图形. 默许是黄色.
closePath 方法
    语法: CanvasRenderingContext2D.closePath()
  • 陈诉: 使用该方法能够将最后一个描点与最开头的描点自动连接起来.

案例

...
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.lineTo( 300, 200 );
ctx.closePath();
ctx.stroke();
微处理机直角坐标系

右x正,下y正。

  • . 代码分析

    1. 要求绘图就须要有canvas标签, 该标签用于展现图像.
    • canvas的宽高不要接纳 CSS 来设置, 会有拉伸的难题. 应该直接使用性质设置.

    • 而是canvas只是展现图像的价签, 它从不绘图的本领. 须要选拔canvas的上下文工具来落到实处绘图.

    • 运用canvas.getContext( '2d' )能够获取绘图工具, 该工具是CanvasRenderingContext2D类型的对象.

    • 需求绘图, 首荐设置绘图的起源.

      • 使用canvas绘图, 要求重视的是他力主先描点, 再连线绘制效果.

      • 为此需求首先设置起源, 然后在起源的底子上呈报别的急需的点.

      • 行使CanvasRenderingContext2D.moveTo( x, y )方法设置起源.

      里头 x, y 代表的是在坐标系中的地点.

    1. 使用CanvasRenderingContext2D.lineTo( x, y )来汇报绘制直线的下二个点. 依次类推能够描述四个点.
    • 描点停止后, 须要接纳CanvasRenderingContext2D.stroke()方法来连线. 开能够来得出效果.
填充与描边样式
  • 语法:

      CanvasRenderingContext2D.strokeStyle = value
      CanvasRenderingContext2D.fillStyle = value
    
  • 描述:

    • strokeStyle 能够安装描边颜色, 与 CSS 的语法同样

    • fillStyle 设置填充颜色, 与 CSS 语法相近

    • 这两本天性还是能安装渐变对象.
      案例

      for (var i=0;i<6;i  ){
          for (var j=0;j<6;j  ){
              ctx.strokeStyle = 'rgb(0,'   Math.floor(255-42.5*i)   ','   
                          Math.floor(255-42.5*j)   ')';
              ctx.beginPath();
              ctx.arc(12.5 j*25,12.5 i*25,10,0,Math.PI*2,true);
              ctx.stroke();
          }
      }
      

**友大家看完那么些足以本人做一些小案例奥,譬喻网格了,坐标系了,还会有折线图啊什么的,后一次见奥!

珍视请关切,小小技士 ,落落izj**

moveTo 方法
      语法:CanvasRenderingContext2D.moveTo( x, y )
  • 描述:

  • 该方法用于安装绘制源点.

  • 在那之中参数 x, y 代表在坐标系中之处, 分别是 x 坐标与 y 坐标.

8###什么是 Canvas

设置线末端类型
  语法: CanvasRenderingContext2D.lineCap = value
  • 描述:

    • 设置线型末端的体裁, 可取值为: 'butt'( 私下认可 ), 'round', 'square'.
    • 'butt' 表示双方使用方形停止.
    • 'round' 表示双方使用圆角甘休.
    • 'square' 代表特出的圆角截止.

案例

...
ctx.lineWidth = 10;
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.stroke();

ctx.beginPath();
ctx.lineCap =  'round';
ctx.moveTo( 100, 130 );
ctx.lineTo( 300, 130 );
ctx.stroke();

ctx.beginPath();
ctx.lineCap =  'square';
ctx.moveTo( 100, 160 );
ctx.lineTo( 300, 160 );
ctx.stroke();

本文由时时app平台注册网站发布于web前端,转载请注明出处: Canvas基本篇【彩世界网址】

关键词: