zoukankan      html  css  js  c++  java
  • canvas绘制路径

    canvas通过路径可以创造出复杂的形状和线条。要绘制路径首先需要调用beginPath()方法,表示要开始绘制新路径。然后调用相应的方法来实际地绘制路径。

    1、arc(centerx,centery,radius,startingAngle,endingAngle,anticlosewise = false)

      以(x,y)为圆心,半径为radius,起始角度为startingAngle,终止角度为endingAngle,顺或逆时针方向绘制一段弧度。

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    
    context.beginPath();
    context.arc(100,100,50,0*Math.PI,2*Math.PI);
    context.strokeStyle = '#ff0000';
    context.lineWidth = 3;
    context.stroke();

    2、arcTo(x1,y1,x2,y2,radius)

      从上一点开始绘制一条弧线,到(x2,y2)为止,并以给定的半径radius穿过(x1,y1)。

    context.beginPath();
    context.moveTo(250,50);
    context.arcTo(400,100,350,150,100);//由点(250,50)开始,绘制一段半径为100的弧线,弧线分别与点(250,50)、(400,100)组成的直线以及点(400,100)、点(350,150)组成的直线相切;
    context.strokeStyle = "#005588";
    context.lineWidth = 3;
    context.stroke();

    3、bezierCurveTo(c1x, c1y, c2x, c2y, x, y)

      从上一点开始绘制一条曲线,到(x,y)为止,并且以(c1x,c1y)和(c2x,c2y)为控制点。

    context.beginPath();
    context.moveTo(350,50);
    context.bezierCurveTo(500,10,500,200,650,100);//由点(250,50)开始经点(400,100)到点(150,100)止;
    context.strokeStyle = "#005588";
    context.lineWidth = 3;
    context.stroke();

    4、lineTo(x,y)

      从上一点开始绘制一条直线,到(x,y)为止。

    context.beginPath();
    context.moveTo(50,350);
    context.lineTo(200,400);
    context.strokeStyle = "#005588";
    context.lineWidth = 3;
    context.stroke();

    5、moveTo(x,y)

      将绘图游标移至(x,y)。

    context.beginPath();
    context.moveTo(50,350);
    context.lineTo(200,400);
    context.strokeStyle = "#005588";
    context.lineWidth = 3;
    context.stroke();

    6、quadraticCurveTo(cx,cy,x,y)

      从上一点开始绘制一条二次曲线,以(cx,cy)为控制点,到(x,y)为止。

    context.beginPath();
    context.moveTo(300,250);
    context.quadraticCurveTo(350,500,400,250);
    context.strokeStyle = "#005588";
    context.lineWidth = 3;
    context.stroke();

    7、rect(x,y,width,height)

      从点(x,y)开始绘制一个矩形,宽高分别为:width、height。

    context.beginPath();
    context.rect(450,300,100,150);
    context.strokeStyle = "#005588";
    context.lineWidth = 3;
    context.stroke();
  • 相关阅读:
    转贴:C语言链表基本操作
    硬盘上的一些算法小题目||and今天看了下林锐的书以及gdb调试 及一些变成算法小题目
    MFC入门 002 滚动条Scorllbar 数字控制框 Spin 进度条 Progress
    002 Windows数据类型 字符集
    001 Windows 简介
    MFC入门 001 Edit&Button&List&ComboBox
    iPads和iPones的Media Queries
    响应式网页设计
    chrome developer tool 调试技巧
    返回一个整型数组中最大子数组的和(02)
  • 原文地址:https://www.cnblogs.com/cornlin/p/7616529.html
Copyright © 2011-2022 走看看