canvas基础用法,颜色随机

By admin in 4858美高梅 on 2019年4月6日

 都说程序员懒,生活依旧无法懒的,比如洗头、洗脸,当然也包含是分享咯。上边分享一下笔者用H5的新标签canvas绘制的饼状图,颜色是随机生成的,动态生成6等分,作者还做了随机生成数据的,

 都说程序员懒,生活依旧不能够懒的,比如洗头、洗脸,当然也包括是分享咯。下边分享一下自己用H5的新标签canvas绘制的饼状图,颜色是随机生成的,动态生成6等分,作者还做了自由生成数据的,

8###什么是 Canvas

canvas 是 HTML伍 提供的贰个用以显示绘图效果的标签. canvas 原意画布, 帆布.
在 HTML 页面中用来体现绘图效果. 最早 canvas 是苹果提议的2个方案,
明日早已在大多数浏览器中实现.

配上文字,每份所占的比重就显而意见。,这一点用在条分缕析数据或然挺好的。图片如下;

配上文字,每份所占的百分比就显而意见。,这一点用在分析数据依然挺好的。图片如下;

canvas 是 HTML5 提供的叁个用以呈现绘图效果的标签. canvas 原意画布, 帆布.
在 HTML 页面中用来突显绘图效果. 最早 canvas 是苹果提议的多个方案,
前些天已经在大部浏览器中达成.

  非零环绕原则:
    若是急需看清某2个区域是不是须要填写颜色.
就从该区域中随意的抉择1个点.
    从那些点拉一条直线出来, 一定要拉到图形的外面.
此时以该点为圆心.
    看穿过拉出的直线的线段. 假诺是顺时针方向就记为 +一, 假如是
逆时针方向,
    就记为 -一. 最终看求和的结果. 假若是 0 就不填充. 如果是 非零
就填充.

canvas 是 HTML5提供的叁个用以体现绘图效果的标签. canvas 原意画布, 帆布. 在 HTML
页面中用于显示绘图效果. 最早 canvas 是苹果建议的二个方案,
后天早已在超越百分之五十浏览器中完毕.。

canvas 是 HTML伍提供的二个用来体现绘图效果的标签. canvas 原意画布, 帆布. 在 HTML
页面中用于体现绘图效果. 最早 canvas 是苹果提议的二个方案,
前日已经在半数以上浏览器中实现.。

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

       4858美高梅 1

基本采纳语法:

canvas基础用法,颜色随机。着力采取语法:

canvas 的主导用法

主干语法

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

默认 canvas 的宽高为 300 和 150.

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

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

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

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

canvas 的选取世界

canvas 的应用世界过多:

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

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

首先给
canvas设置宽高无法再样式表里设置,只幸好行内中装置,那样就不会失真,私下认可宽高是300,150

  1. 应用 canvas 标签, 即可在页面中开发一格区域. 能够安装其 width 和
    height 设置该区域的尺寸.
  2. 暗中认可 canvas 的宽高为 300 和 400.
  3. 并非接纳 CSS 的方法设置宽高, 应该使用 HTML 属性.
  4. 倘诺浏览器不辅助 canvas 标签, 那么就会将其阐述为 div 标签.
    因而常常在 canvas 中置放文本, 以提醒用户浏览器的能力.
  5. canvas 的包容性情外强, 只要永葆该标签的, 基本成效都平等,
    因而不用思考包容性难点.
  6. canvas 自己无法绘图. 是使用 JavaScript 来形成绘图. canvas
    对象提供了各样绘图用的 api.
  1. 应用 canvas 标签, 即可在页面中开拓一格区域. 能够安装其 width 和
    height 设置该区域的尺寸.
  2. 私下认可 canvas 的宽高为 300 和 400.
  3. 不要采用 CSS 的点子设置宽高, 应该使用 HTML 属性.
  4. 若是浏览器不辅助 canvas 标签, 那么就会将其解说为 div 标签.
    因而平日在 canvas 中置放文本, 以提示用户浏览器的能力.
  5. canvas 的包容性格外强, 只要永葆该标签的, 基本成效都相同,
    因而不用思索包容性难点.
  6. canvas 自身无法绘图. 是选拔 JavaScript 来形成绘图. canvas
    对象提供了种种绘图用的 api.

基本绘图

  ctx.moveTo :(x , y): 将绘制的起头点设置为x ,y
  ctx.lineTo : (x , y):从脚下岗位
  ctx.stroke():描边绘图,将坐标点连起来;
  ctx.fill():调用fill方法会将兼具的点连接起来,并整合三个查封的图片结构,借使具有的描点未有构成封闭构造,也会将起来的起源,与最终的点连接起来,构成一个闭合
的图样,并填写颜色,私下认可红棕;
  ctx.beginPath():开启新路径;
  closePath( ):闭合路径;
  ctx.strokeStyle= : 设置边框颜色;
  ctx.fillStyle=:设置填充颜色;
  ctx.lineWidth=:设置线宽;
  ctx.lineCap=:设置线 末端 以什么样品种甘休; butt(两端使用方形甘休)
round(两端末端添加圆形线帽) square (两端末端添加星型线帽)
  ctx . lineJoin=:设置相交线的拐点; ’round’ 使用圆角连接. bevel’
使用平切连接. ‘miter’ 使用直角转.

绘图步骤

绘制步骤

骨干绘图方法

绘制步骤

  • 获得canvas对象.

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

    • 该方式重返CanvasRenderingContext二D类型的对象.
      该对象提供基本的绘图命令.

  • 利用CanvasRenderingContext二D对象提供的主意开始展览绘图.

    • 主干绘图命令

      • 安装早先绘图的职分: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();
      

虚线:
  lineDashOffset = : 用于安装开首绘制虚线的偏移量.
数字的正负表示左右偏移;
  getLineDash( ) :获取实虚线数组;
  setLineDash([ 5, 5 ] ) : 设置实线长度为五,虚线长度为五;

  1. 获得 canvas 对象.
  2. 调用 getContext 方法, 提供字符串参数 '2d'.
  3. 该办法再次回到 CanvasRenderingContext2D 类型的对象.
    该目的提供基本的绘图命令.
  4. 4858美高梅,使用 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. 该格局用于绘制1段弧, 合营开端点的职位
        与 stroke 方法或 fill 方法能够绘制扇形.
      2. 主意中的前八个参数 x, y 代表绘制圆弧的圆心坐标.
      3. 参数 radius 表示圆弧半径, 单位为弧度.
      4. 参数 startAngle 与 endAngle 表示初叶到结束的角度.
        角度以水平向右为 0 弧度, 顺时针为四方向.
      5. 参数 anticlockwise 表示是不是选拔暗许的正向角度, 假使传入 true
        表示逆指针为正. 该参数可选.
  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. 该措施用于绘制1段弧, 合作初始点的职务与 stroke 方法或 fill 方法能够绘制扇形.
      2. 格局中的前七个参数 x, y 代表绘制圆弧的圆心坐标.
      3. 参数 radius 表示圆弧半径, 单位为弧度.
      4. 参数 startAngle 与 endAngle 代表初步到截至的角度.
        角度以水平向右为 0 弧度, 顺时针为肆方向.
      5. 参数 anticlockwise 表示是还是不是采纳默许的正向角度, 假设传入 true
        表示逆指针为正. 该参数可选.
电脑直角坐标系

右x正,下y正。

  • . 代码分析

    1. 急需绘图就须要有canvas标签, 该标签用于突显图像.
    • canvas的宽高不要采用 CSS 来设置, 会有拉伸的题材.
      应该一向运用品质设置.

    • 只是canvas只是呈现图像的价签, 它从不绘图的能力.
      必要利用canvas的上下文工具来贯彻绘图.

    • 应用canvas.getContext( ‘2d’ )能够获得绘图工具,
      该工具是CanvasRenderingContext二D类型的对象.

    • 亟待绘图, 首要选拔设置绘图的源点.

      • 选取canvas绘图, 须要珍视的是她主张先描点, 再连线绘制效果.

      • 就此必要首先设置起源, 然后在源点的功底上讲述其余须要的点.

      • 动用CanvasRenderingContext二D.moveTo( x, y )方法设置源点.

      中间 x, y 表示的是在坐标系中的地点.

    1. 运用CanvasRenderingContext2D.lineTo( x, y
      )来讲述绘制直线的下贰个点. 依次类推能够描述多个点.
    • 描点甘休后, 需求选拔CanvasRenderingContext二D.stroke()方法来连线.
      开能够来得出效果.

绘制矩形:
  Ctx . rect ( x , y , width , height ) :
只是描边,必须求同盟stroke()/ fill( ) 使用;
  Ctx . strokeRect (x , y , width , height) : 直接绘制星型;
  Ctx . fillRect (x , y , width , height) :
绘制星型并且填充默许品绿;
  Ctx . clearRect(x , y , width , height): 清除绘制的矩形;

4858美高梅 2

4858美高梅 3

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

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

    • 只假如绘制平面图形应用’贰d’作为参数, 如若绘制立体图形应用’webgl’.

    • 利用’2d’重返CanvasRenderingContext贰D类型的对象.

    • 运用’webgl’重回WebGLRenderingContext类型的对象.

排除画布:
  Ctx . clearRect ( 0 , 0 , cas . width , cas . height )
:从画布圆点开端,以画布的高和宽进行清除;
  Cas . width = cas . width :
重新设置画布的宽,相当于画布被刷新了一次,也就被清空;

4858美高梅 4

4858美高梅 5

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

  • 该措施用于安装绘制源点.

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

圆弧:
  ctx . arc(x , y , r , startAngle . endAngle , anticlockwise)
陆个参数,前伍必填;
      x , y 是圆心坐标;
       radius 表示圆弧半径, 单位为弧度;
      startAngle 与 endAngle 表示起头到甘休的角度,从 x 正轴为 0°,
顺时针为正方向 .
      anticlockwise (方向正反):表示是或不是使用暗中同意的正向角度,
假诺传入 true 表示逆指针为正 . 该参数可选.

4858美高梅 6

4858美高梅 7

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

    • 该方法用于安装需求绘制直线的另二个点.
      最后描边后会连线当前点和办法参数描述的点.

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

弧度制:
  为了更好的盘算角度,我们把角度提供三个新的定义,用 PI
(π)作为单位,将单位圆的二个整圈(360度)记作 2 倍的 PI;
如此的心气表示就是弧度制的代表方法;
  angel 角度;
  radian 弧度 ;

stroke 方法
      语法:CanvasRenderingContext2D.stroke()

讲述: 该办法用于连线, 将讲述的全部点依照钦赐顺序连接起来.

角度转换为弧度:
  弧度 = 角度 / 180 * π π =180度 弧度 = 60度 / 180度 * π ;

结论

一.绘图先要获得上下文, 即绘图工具

二.绘制必要设置开端的坐标

三.绘制是先描点, 然后一个三个逐项连线

四.依次绘图只可以绘制单1样式( 色彩等 )

弧度转换为角度 :
  角度 = 弧度 * 180 / π 角度 =(π / 3) * 180 / π ;

直线图形

  • 绘制直线总括坐标.
    • 描边调用 CanvasRenderingContext二D.stroke() 方法.
  • 填充使用 CanvasRenderingContext二D.fill() 方法.

 

fill 方法

      语法: CanvasRenderingContext2D.fill()
  • 叙述: 该方法会根据描绘的点的路子来填充图形. 暗中认可是暗黄.

 

非零环绕原则
  • 说明:
    • 在 canvas 中选取各个格局描点实际上描述的是四个叫做路径( path
      )的东西.
    • 在 canvas 绘图中, 全部描述的事物都以路径,
      只有最后填充或描边的时候才会显得出效果.
    • 每1个门路都以二个状态.
      顺时针加一;逆时针减壹,为零的不渲染

计量圆弧上的点的坐标:
  x = x0 + r * Math . cos(a); x0为圆心x
  y = y0 + r * Math . sin(a); y0为圆心y

关掉路径

 

closePath 方法
    语法: CanvasRenderingContext2D.closePath()
  • 讲述: 使用该办法能够将最终四个描点与最开端的描点自动接二连三起来.

案例

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

绘制文本:
  Ctx . fillText ( ” 文字内容 “,x , y ) : 实心文字;
x,y为文本的开首点坐标,不过是以文字的左下角为开头点坐标;
  Ctx . strokeText (“ 文本内容 ”, x , y): 描边文字,镂空的文字;
x,y为文本的初叶点坐标,不过是以文字的左下角为起初点坐标;
  Ctx . font():设置绘制字体的各个音讯, 与 CSS 语法1致 ,
设置字体形状 , 样式 , 字号粗细等 style | variant | weight |
size/line-height | family.

线型相关属性

设置描边与填充不必然只可以利用中湖蓝的细线. 能够选择一些品质设置其意义

    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();

文字对齐属性:
  ctx . textAlign = : 水平对齐; left( 暗许start ) / right(end) /
center ; 以左下角的点为竖线,水平向左 / 右 / 中间对齐;
  Ctx . textBaseline = : 垂直对齐; bottom(暗中同意) /
middle(英文肆条线上的第二条线) / top(悬挂在基线下) ;
以左下角的点为横线, 垂直向上 / 中 / 下对齐;

设置线末端类型
  语法: 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();

   /阿尔法betic 表示字母参考线, ideographic 会比它低一些, hanging
表示悬挂. [ 对齐形式:可不记 ]

安装相交线的拐点
  语法: 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();

绘图图片:
  [ 绘制图片要等待图片获取到了随后再绘制,img.onload=function( ) {
ctx.drawImage ( img, x , y ) } ]
    ctx . drawImage ( img, x , y ) : 将图片绘制到x,
y表示的岗位去;
    ctx . drawImage ( img, x , y, width , height ) :
将图纸绘制到内定的矩形里去;
    Ctx . drawImage ( img , sx , sy , sWidth , sHeight , dx , dy ,
dWidth , dHeight ):
    那里的蕴藏 s 前缀的参数正是指图源的矩形区域,将图片的 ( 十0,
100, 300, 200 ) 处的剧情绘制到页面包车型客车 ( 拾0, 100, 300, 200 ) 的地点.

虚线
  • 语法:

...
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();

变换:
  Ctx . scale ( ) : 该办法完成程度与垂直的缩放.
        参数 x 控制水平缩放倍率. 传参 一 意味不作缩放, 传入大于 壹的数字代表扩大.
        参数 y 控制垂直缩放倍率. 传参 1 意味不作缩放, 传入大于 1的数字代表扩张;

填充与描边样式
  • 语法:

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

    • strokeStyle 能够设置描边颜色, 与 CSS 的语法一样

    • fillStyle 设置填充颜色, 与 CSS 语法1样

    • 那八个特性还能安装渐变对象.
      案例

      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**

  Ctx . translate( ) : 平移变换就是将原本坐标轴实行平行移动,
那么坐标轴移动后就足以应用新坐标来绘制图形了.

  Ctx . rotate( radian ) : 该办法将坐标轴进行旋转变换.
         参数是弧度, 表示旋转的方式. 正数表示顺时针旋转,
负数表示逆时针旋转.

canvas状态:
  Ctx . save(): 保存情状,将画的事态封起来;
  Ctx.restore() : 恢复生机成起先的情景,也正是再一次beginPath(
)开首以往,不会三番五次上一回的图样属性效果;
  两者要合营头尾使用,才能防止后续的标题;

Konva:
使用Konva的步骤
  壹.急需引进Konva库
  2.在页面中放置五个div作为舞台的器皿(供给设置id属性)
  三.行使Konva创立舞台
    在Konva中Konva那些名字是二个命名空间,全数的构造函数都以它的分子
    例: var stage = new Konva . Stage();
Stage正是Konva的构造函数成员
  4.创设舞台使用Konva.Stage
    参数必须有width, height, container

Stage : 舞台, 类似html
  var stage =new Konva . Stage({
    width : 600,       宽为600,高为400的舞台
    height : 400,
    container: ‘dv’    容器为div
  });

Layer : 层,类似body, 舞奥兰多要有层; var layer = new Konva . Layer
();

Rect : 矩形 var rect = new Konva . Rect({ 长方形的属性 });
类似div

add () : stage . add( Layer ) / layer . add ( rect )
必须把层位于舞台上, 再把成分放在层里,就能够渲染出来;
    注意点:
先成立舞台,再次创下设层,再绘制图形,再将图片添加到层中,再将层添加到舞马普托,千万不可能还没绘制图形,就先把层添加到舞台上,而再去绘制图形,否则添加的是个空图层;

控制台里得到x.y的坐标值: Element.x( ) Element.y( ) ;

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有