zoukankan      html  css  js  c++  java
  • H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作

    天的目标

      3.1:canvas--(重:变对象..图片.变形)

      3.2:canvas--变对象

       线: linearGradient

       :

       var g = ctx.createLinearGradient(x1,y1,x2,y2);

       g.addStopColor(offset,color);

       ..

       ctx.fillStyle = g;

       ctx.strokeStyle = g;

      

      3.3:canvas--(复杂)

      Path:由多个标点组成任形状,径不见,用于

           "","填","裁"...

       ctx.beginPath();     开始一条新路径

       ctx.closePath();     闭合当前路径

       ctx.moveTo(x,y);    移动指定点

       ctx.lineTo(x,y);      从当前点到指定点画直线

       ctx.arc(cx,cy,r,start,end); 绘制圆拱形

       cx cy 圆

       r    

       start 始角度   (0~2*PI)

       end  束角度   角度*Math.PI/180==

       ctx.stroke();       描

       ctx.fill();          填

       练习:使用描边绘制一个坐标轴

       练习:使用圆拱形绘制可以前进的圆环进度条

       

       练习:建一个函数openMouth()/closeMouth();

            创建定义时器,每隔1s交替调用

            openMouth()/closeMouth();

       

      3.4: canvas--图片

       canvas属于客端技术,图片在服器中,以浏览必须下载要绘制的图片,且等待图片异步载完成.

       var p3 = new Image();      创建图片对象

       p3.src = "x.jpg";          下载指定图片

       p3.onload = function(){     图片下载完成触发事件

             console.log(p3.width);

             ctx.drawImage(p3,x,y);    原始大小绘图

             ctx.drawImage(p3,x,y,w,h); 拉伸绘图

       }

       

       练习:在画布四个角各画一架飞机

       练习:在画布左上角画一个左右移动飞机

       

    canvas图核心知识点--

    制矩形:

    ctx.fillRect();ctx.strokeRect();ctx.clearRect();

    制文本

    ctx.fillText();ctx.strokeText();ctx.measureText().width

    制路径

    ctx.beginPath();ctx.closePath();

    ctx.moveTo();ctx.lineTo();

    ctx.arc();ctx.stroke();ctx.fill()

    制图

    ctx.drawImage();


      3.4: canvas
    --形操作 

       canvas绘图可以针对于某一个图像/形,的绘制过程

       进行变形 rotate,translate

       ctx.rotate(弧);      旋笔,轴点画布的原点.

       ctx.translate(x,y);     平移原点

       ctx.save();           保存画状态()

       ctx.restore();        恢复画状态到上一次保存(取存盘)

      练习:在画布左上角画一个绕自己为中心旋转飞机1

      练习:在画布右上角画一个绕自己为中心旋转飞机2

           飞机2旋转速度是飞机1 2svg绘

      :使canvas制随机改变验证码图片!

      

      var str = "ABC..abcdefghim...1234567890";

      var char = str[字符串长度随机数] 17:45~17:57

      要:

      画景随机颜色[],ctx.fillRect();

      文字内容随机,小随机,颜色随机(),旋转角度随机

      5条随机干线(深), 贝赛尔曲线

      100个(径为1)

  • 相关阅读:
    bzoj3622: 已经没有什么好害怕的了
    BSGS
    LOJ#2320 生成树计数
    ??? cliquers
    生成函数
    洛谷P5206 数树
    01分数规划
    差分约束系统
    51nod1238 最小公倍数之和 V3
    51nod1237 最大公约数之和 V3
  • 原文地址:https://www.cnblogs.com/QiliPING9/p/9091917.html
Copyright © 2011-2022 走看看