zoukankan      html  css  js  c++  java
  • Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径

    绘制路径

    2D上下文支持许多在画布上绘制路径的方法

    通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径

    然后再通过下列的方法绘制路径:

    • arc(x,y,半径,起始角度,结束角度,旋转方向):     用于绘制圆形路径,以(x,y)为圆心,旋转方向为一个bool值表示是否以逆时针方向绘制,起始角度以及结束角度的单位都是弧度
    • arcTo(x1,y1,x2,y2,半径):                       从(x1,x2)为起点绘制一条到(x2,y2)的弧线,且该圆弧的半径为指定值
    • bezierCurveTo(c1x,c1y,c2x,c2y,x,y):               从上一个点为起点绘制一条到(x,y)点的曲线,并且以(c1x,c1y)和(c2x,c2y)两点为控制点(即绘制贝塞尔曲线)
    • lineTo(x,y):                                                       从上一点绘制一条到(x,y)点的直线
    • moveTo(x,y):                                                    起点移到(x,y)点,不画线
    • quadraticCurveTo(cx,cy,x,y):                           从上一点绘制一条到(x,y)点的二次曲线,以(cx,cy)为控制点
    • rect(x,y,width,height):                                      从点(x,y)开始绘制一个矩形,宽度为 width 高度为 height,这里绘制的是矩形路径,而不是一个独立的形状

    当路径绘制完成后有几种不同的操作:

    • closePath(): 如果希望绘制一条连接到路径起点的线条则可以调用该方法
    • fill(): 用fillStyle来填充图形
    • stroke(): 对路径描边
    • clip(): 在路径上创建一个剪切区域

    例如如果我们希望在canvas中绘制一个时钟,可以使用以下代码:

    var drawing  = document.getElementById("drawing");
    
    // 确定浏览器对canvas的支持
    if(drawing.getContext){
        var context = drawing.getContext("2d");
    
        // 开始路径
        context.beginPath();
    
        // 绘制外圆
        context.arc(100,100,99,0,2*Math.PI,false);
    
        // 绘制内圆
        context.moveTo(194,100);
        context.arc(100,100,94,0,2*Math.PI,false);
    
        // 绘制分针
        context.moveTo(100,100);
        context.lineTo(100,15);
    
        // 绘制时针
        context.moveTo(100,100);
        context.lineTo(35,100);
    
        // 描边路径
        context.stroke();
    }

    为了方便我们对路径的控制, 2D上下文还提供了一个方法

    isPointInPath(x,y)  该方法用于判断(x,y)是否位于路径上,在路径关闭前有效

  • 相关阅读:
    Codeforces Beta Round #69 (Div. 2 Only)
    Codeforces Beta Round #67 (Div. 2)
    Codeforces Beta Round #65 (Div. 2)
    UmBasketella
    Codeforces Beta Round #63 (Div. 2)
    [agc004d]Teleporter
    [arc076f]Exhausted?
    NOIp模拟赛二十八
    CDQ分治笔记
    (noip模拟二十一)【BZOJ2500】幸福的道路-树形DP+单调队列
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10537053.html
Copyright © 2011-2022 走看看