zoukankan      html  css  js  c++  java
  • canvas和svg

    canvas画布

    1.不要再style中给canvas设置宽高,会有位移差

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

    但可以设置画布的背景色

    2.

    var c=document.getElementById("c")
        //给c设置子一个绘图环境   得到一个对象
    var can=c.getContext("2d")

    canvas本身只是一个H5新标签,他的本质和div差不多

    但当给了他   getContext("2d")    后  就成为了一个画图对象

     然后就可以通过他内置的属性方法进行作画

    绘制方块

    fillRect()  绘制一个填充的方块  默认颜色是黑色 但是可以通过  fillStyle(填充颜色)  改变  

    注意:一切样式的改变都要在写在绘制之前    遵循js从上往下执行的规则

    can.fillStyle="red"
    can.fillRect(20,30,100,100)

    我这一个方块就是先将其颜色变为红色,然后再绘制出来

    fillRect()中有4个参数  分别代表着 方块的  x轴位置 y轴位置  宽  以及  高  

    位置都想相对于画布的左上角为(0,0) 进行移动的

    (我的画布部分为白色,非画布部分是黑色)

    strokeRect()  绘制带边框的方块  默认边框颜色是黑色 但是可以通过  strokeStyle(填充颜色)  改变

    strokeRect()中有4个参数  分别代表着 方块的  x轴位置 y轴位置  宽  以及  高    (跟填充差不多)

    can.fillStyle="red"
    can.strokeRect(20,30,100,100)

    绘制线条

      moveTo() 绘制线段的起点

      lineTo()  绘制线段的领点

      每个线段只能有一个moveTo 可以有多个lineTo

      stroke() 绘制线段

      

      beginPath()  开始绘制路径

      closePath()  结束绘制路径   二者同时出现  将绘制路径闭合

      (起始点  结尾点首尾相连)

      Rect()  绘制方块

      clearRect(0,0,width,height)   清除画布(画布中图样的不断变化,是通过不断清除画图,不断重复作画得出的)

      save()  保存路径

      restore()    回复路径

      二者成对出现,中间的属性样式只影响内部  不影响外面

    画圆:

      arc()   

    can.arc(150,150,95,0,2*Math.PI,false)

      参数作用分别为  x  , y圆心位置(都是以canvas画布的左上角为起点)   半径    弧度起点   弧度终点    false(顺时针)/true(逆时针)

      注意  :角度有正负之分  顺时针转的角度是正的, 逆时针转的角度是负的

    画布的平移和旋转

    平移translate画布大小位置不变  起始坐标  变了

    can.translate(100,100)

    相当于坐标平移

    rotate()

    画布的旋转都是以(0,0)起始点为中心点旋转

    scale(0.5,0.5)

    画布的缩放   就是将画布向后移动  跟人的视距就变远了  近大远小

    画布中插入图片

    var img=new Image;
        img.src="bg.jpg"
        img.onload=function(){
            can.drawImage(img,10,20,160,200)
       }

    需要创建一个图片对象,让图片被加载完成后执行

    插入字体:

    200,200字体的起始点  默认起始点在文字的左下角

    svg 矢量图

      svg绘制矢量图  canvas用于绘制位图

      svg使用xml格式绘制图形

    svg要有一个根节点  叫svg标签  就相当于 html

    svg如果不设置大小  默认占用面积  300*150

    定义矩形

      <rect></rect>  属性: width(宽) height(高)  x  y(位置)   rx ry(圆角)  fill(填充颜色)  stroke-width(边框宽度)   stroke(边框颜色)

      opacity透明度(填充和边框都改变)   fill-opacity填充透明度   stroke-opacity边框透明度

    定义圆

      <circle></circle>   属性: cx  cy(圆心坐标)   r(半径)

    定义椭圆

      <ellipse></ellipse>   cx cy(圆心坐标)   rx(定义x轴半径)   ry(定义y轴半径)

    定义直线

      <line></line>   x1 y1(起始坐标)    x2 y2(定义结束坐标)   stroke(线段颜色)

    定义路径

      <path></path>

    M是起点坐标

    L是相邻点坐标

    Z让路径构成闭合回路

    H代表水平的线条 默认y轴上的值一样

    V 代表垂直的线条 默认x轴上的值一样

    A 后面跟七个值

    Transfrom 转换 svg中的一个属性 translate  rotate scale

    平移 旋转 都是以起点0 0(svg的左上角)点为参考点 而css3中以元素的中心点为参考点

    g  用于将相关元素进行组合

    g身上的属性 子元素都会继承 但是g上的属性都必须是显现属性 不是svg元素私有的 比如 g 上的圆心坐标不行

    Text 用于定义文本 x y xy的值在字体的左下角

    Text-anchor=”middle” 让字体居中

    Image 绘制图片

    <use>用于复制元素 x y

    xy 是相对于原始的元素的坐标位置 不是相对svg的00点坐标

    animate

    写在需要动画元素的中间

    attributeName  form to dur repeatCount=”indefinite”(无限次)

  • 相关阅读:
    linux离线安装mysql
    SpringBoot配置SSL证书
    java在liunx下备份mysql数据,恢复数据
    Redis的缓存穿透,缓存击穿,缓存雪崩
    Spring缓存注解
    Advanced Algorithm Scripting
    Arguments Optional
    Everything Be True
    Binary Agents
    Steamroller
  • 原文地址:https://www.cnblogs.com/Shinigami/p/10902327.html
Copyright © 2011-2022 走看看