• h5-canvas(其他api)


    ###1.使用图片(需要image对象)

      drawImage(image,x,y,width,height)

        其中image是image或者canvas对象,x和y 是其在目标canvas的起始坐标

          width和height指控制该image或canvas对象画入画布的大小

       eg:

          var img = new Image();

          img.src = "xxx.png";

          img.onload = function(){  draw();   //建议该函数内部的代码抽取为外部函数调用 };

          function draw(){

            ctx.drawImage(img,100,100,150,150);

          }

    ###2.设置背景(需要image对象)

      createPattern(image,repetition)  

        image: 图像源

        repetition:      指定如何重复图像。

          "repeat"       "repeate-x/y"    "no-repeat"

        eg:

          var img = new Image();

          img.src = "xxx.png";

          img.onload = function(){

            var pattern = ctx.createPattern(img,"repeat");

            ctx.fillStyle = pattern;

            ctx.fillRect(0,0,400,400);

          }

    
    

    ###3.渐变

      3.1) 线性渐变  createLinearGradient(x1,y1,x2,y2)         该方法返回一个对象,该对象含有一个addColorStop(position, color)方法

                                  position: 参数必须是一个0.0与1.0之间的数值,表示渐变中的颜色所在的相对位置

                                        例如0.5表示颜色会在正中间开始渐变

                                        eg: gradient.addColorStop(0,"red");  gradient.addColorStop(0.5,"yellow")  gradient.addColorStop(1,"green")

                                            红-----黄-----绿    依次渐变

                                  color 参数为一个有效的css颜色值

        参数为渐变的起点(x1,y1)与终点(x2,y2)

        eg:           var  gradient = ctx.createLinearGradient(0,0,150,150);

               gradient.addColorStop(0.5, #eee)

      3.2) 径向渐变 createRadialGradient(x1,y1,r1,x2,y2,r2)

            三个参数定义一个以(x1/2,y1/2)为圆点半径为r1/2的圆   

     ###4. 使用文本

      fillText(text , x,y)  指定的x,y位置填充指定文本

      strokeText(text,x,y)       在指定的x,y位置绘制文本边框

      4.1)文本样式

        font = value     与css font属性相同的语法   只支持一种字体 sans-serif          eg:  ctx.font = “20px  sans-serif”   必须有大小和字体

        textAlign = value    文本对齐选项      left 、right  、center

        textBaseline = value     指定当前文本基线      top、middle中间()、bottom

        .....等

        

  • 相关阅读:
    集合之Map和List线程安全问题
    vue直接赋值后数据不更新
    使用sysmon事件映射ATT&CK
    blackhat议题"通过RPC防火墙拦截横向渗透"
    大数据Hadoop之——新一代流式数据湖平台 Apache Hudi
    【云原生】MySQL on k8s 环境部署
    【云原生】Presto/Trino on k8s 环境部署
    【云原生】Flink on k8s 讲解与实战操作
    【云原生】Spark on k8s 讲解与实战操作
    【云原生】Elasticsearch + Kibana on k8s 讲解与实战操作
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10563609.html
Copyright © 2020-2023  润新知