zoukankan      html  css  js  c++  java
  • canvas

    canvas画布 (位图)

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

      2.js中每次使用canvas,都要设置一个绘图环境,然后会得到一个对象,然后对其进行操作;

        var c=document.getElementById("") canvas标签的id值;

        var d=c.getContext("2d")  设置绘图属性;

        然后得到d这个对象,就可以对其进行操作元素里面的属性和方法;

        方法和属性(带()的是方法,不带的是属性):

    属性:

      fillRect() 绘制一个填充的方块(默认颜色是黑色)

      strokeRect() 绘制带边框的方块

      绘制线条

        moveTo() 绘制线段的起点

        lineTo()  绘制线段的领点

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

        stroke() 绘制线段

        beginPath(),closePath()  二者同时出现,将绘制路线闭合(起始点,结尾点首尾相连)

      rect() 绘制方块

        clearRect(0,0,width,height) 清除画布

        can.save(),can.restore()  二者成对出现,中间的属性样式只影响内部,不影响外部

      画圆

        can.arc(200,200,50,0,Math.PI,ture)

        can.stroke()

        200,200 圆心坐标;50  半径;0 起始弧度;Math.PI 结束弧度 ;true 逆时针方向

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

      画布的平移和旋转

        平移:translate 画布大小位置不变,起始坐标变了(相当于坐标平移)

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

        scale(0.5,0.5) 画布的缩放,将画布向后移动,人的视距就变远了;近大远小

      画布中插入图片

        

      画布中插入字体

        

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

  • 相关阅读:
    Charles 弱网测试
    jmespath 教程
    Fiddler查看接口响应时间
    Fiddler如何模拟弱网环境进行测试
    Github 上配置 Personal Token Key
    fiddler抓取app请求
    Charles 设置https 抓包
    PostgreSQL触发器使用实践——数据审计(转载)
    使用aop注解实现表单防重复提交功能(转载)
    转载( Spring Cloud gateway 网关拦截Post请求日志)
  • 原文地址:https://www.cnblogs.com/wwwzhaocom/p/10910892.html
Copyright © 2011-2022 走看看