zoukankan      html  css  js  c++  java
  • 绘制复杂图形

    概念:

    除了arc方法以外,其他使用路径绘制图形时会使用到的 方法,首先从绘制直线开始

    绘制直线时,一般会用到两种方法

    一、moveTo

    作用是将光标移动到指定坐标点,绘制直线的时候以这个坐标点为起点

    moveTo(x,y)

    该方法使用两个参数,x表示指定坐标点的横坐标,y表示指定坐标点的纵坐标

    二、lineTo

    该方法在moveTo方法中指定的直线起点与参数中指定的直线终点之间绘制一条直线

    lineTo(x,y)

    该方法使用两个参数,x表示直线终点的横坐标,y表示直线终点的纵坐标

    应用:

    function drawarc()
    {
    var canvas = document.getElementById('fuza');
    if(canvas == null)
    return false;
    var context = canvas.getContext('2d');
    context.fillStyle = '#EEEEFF';
    context.fillRect(0,0,400,300);
    var n = 0;
    var dx = 150;
    var dy = 150;
    var s = 100;
    context.beginPath();//开始创建路径
    context.fillStyle = 'rgba(100,255,100)';//设置颜色
    context.strokeStyle = 'rgb(0,0,100)';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI/15*11;
    for(int i=0;i<30;i++)
    {
    var x = Math.sin(i*dig);
    var y = Math.cos(i*dig);
    context.lineTo(dx+x*s,dy+y*s);
    }
    context.closePath();//关闭路径
    context.fill();//填充图形
    context.stroke();
    }
    }

  • 相关阅读:
    jQuery的动画效果
    jQuery的event事件
    设计模式 命令行模式
    桥接模式
    享元模式
    代理模式
    门面模式
    代理模式
    python基础-abstractmethod、__属性、property、setter、deleter、classmethod、staticmethod
    库存负数
  • 原文地址:https://www.cnblogs.com/yanyanstyle/p/11321028.html
Copyright © 2011-2022 走看看