zoukankan      html  css  js  c++  java
  • canva基础绘制曲线(3)

    1、canvas绘制贝塞尔曲线

    1.1canvas绘制二次贝塞尔曲线

    1.1.1绘制二次贝塞尔曲线方法

    参数说明:关于绘制方法中每个点的说明见如下图

    1.1.2代码实现绘制二次贝塞尔曲线

                    var mycanvas=document.getElementById('mycanvas'); //获取canvas对象
                    var context=mycanvas.getContext('2d');  //getContext会返回一个对象,这个对象封装了很多绘图的属性和方法    
                    context.moveTo(50,50);
                    context.quadraticCurveTo(200,200,400,50);
                    context.stroke();

    1.1.3效果预览

     1.2绘制三次贝塞尔曲线

    1.2.1绘制三次贝塞尔曲线方法

    1.2.2绘制三次贝塞尔曲线代码实现:

                    var mycanvas=document.getElementById('mycanvas'); //获取canvas对象
                    var context=mycanvas.getContext('2d');  //getContext会返回一个对象,这个对象封装了很多绘图的属性和方法    
                    context.moveTo(50,50);
                    context.bezierCurveTo(200,200,100,0,300,50)
                    context.stroke();

    1.2.3效果预览

    2、绘制圆

    代码实现:

                    var mycanvas=document.getElementById('mycanvas'); //获取canvas对象
                    var context=mycanvas.getContext('2d');  //getContext会返回一个对象,这个对象封装了很多绘图的属性和方法    
                    context.arc(100,100,50,0,Math.PI*2,true);
                    context.stroke();

    效果预览:

    下面我们从0开始绘制一个45度角的圆来说明一下最后一个参数

    • 如果为true则代表是从逆时针方向绘制,代码实现
    context.arc(100,100,50,0,Math.PI/4,true);

    效果预览:

    • 如果为false则是从顺时针方向开始绘制

    代码实现:

    context.arc(100,100,50,0,Math.PI/4,false);

    效果预览:

    3、应用实例

    3.1绘制一个类似于心跳的小动画

    功能描述,当我点击圆内部的时候,圆会像外层放大缩小,类似于心跳 

    代码实现:

    window.onload=function(){
        var mycanvas=document.getElementById('mycanvas'); //获取canvas对象
        var context=mycanvas.getContext('2d');  //getContext会返回一个对象,这个对象封装了很多绘图的属性和方法    
        context.arc(200,200,50,0,Math.PI*2,false);
        context.stroke();
        var angle=0;
        mycanvas.onclick=function(e){
            var mx=e.layerX;  //获取鼠标点击的位置横坐标
            var my=e.layerY;  //获取鼠标点击的位置纵坐标
            if(context.isPointInPath(mx,my)){  //判断鼠标点击的是不是在圆内的位置,如果是,执行以下代码
                setInterval(function(){
                    context.clearRect(0,0,400,400);  //清除之前的路径
                    angle+=0.1;
                    context.beginPath();
                    context.arc(200,200,50+10*Math.sin(angle),0,2*Math.PI); //sin的取值范围是在-1到1之间,在这里我们利用三角函数,让圆的半径的变化的范围在0-10之间
                    context.stroke();
                },50);
            }
        };
    
    };

    演示效果:

  • 相关阅读:
    ASP.NET Web API 框架研究 Self Host模式下的消息处理管道
    ASP.NET Web API 框架研究 Web Host模式下的消息处理管道
    ASP.NET Web API 框架研究 核心的消息处理管道
    ASP.NET Web API 框架研究 Web Host模式路由及将请求转出到消息处理管道
    ASP.NET Web API 框架研究 ASP.NET Web API 路由
    ASP.NET Web API 框架研究 ASP.NET 路由
    ASP.NET Web API 入门 (API接口、寄宿方式、HttpClient调用)
    MVVM模式
    RESTful Web API 理解
    C# 函数式编程及Monads.net库
  • 原文地址:https://www.cnblogs.com/Anne1991/p/6558653.html
Copyright © 2011-2022 走看看