zoukankan      html  css  js  c++  java
  • raphaeljs图形库学习笔记

    官网地址:点我

    <!doctype html>
    <html dir="ltr" lang="zh-CN">
      <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=8">
        <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
        <script type="text/javascript" charset="utf-8">
          window.onload = function () {
            var paper = Raphael("canvas", 640, 480);
            paper.path({fill: "#000"},"M20,20L100,110z")
          };
        </script>
        <title>直线</title>
      </head>
      <body>
        <div id="canvas"></div>
      </body>
    </html>
    

    <!doctype html>
    <html dir="ltr" lang="zh-CN">
      <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=8">
        <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
        <script type="text/javascript" charset="utf-8">
          window.onload = function () {
            var paper = Raphael("canvas", 640, 480);
            var c = paper.circle(10, 10, 10).attr({fill: "#a9ea00", stroke: "none"}).animate({cx:100,cy:100,r: 20}, 2000)
          };
        </script>
        <title>移动圆形</title>
      </head>
      <body>
        <div id="canvas"></div>
      </body>
    </html>
    

    animate 函数中的哈希为变化后的圆的坐标与半径(radii)。

    <!doctype html>
    <html dir="ltr" lang="zh-CN">
      <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=8">
        <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
        <script type="text/javascript" charset="utf-8">
          window.onload = function () {
            var paper = Raphael("canvas", 640, 480);
            paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});
            paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 1,0 150,-150 z");
          };
        </script>
        <title>扇形</title>
      </head>
      <body>
        <div id="canvas"></div>
      </body>
    </html>
    

    要点:h为水平延伸,后面跟着一个数值为延伸的距离,负数为向左,正数为向右。

    我们再来看a的参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y,相当于水平半径,垂直半径,是否以x轴旋转,是否为大弧,是否顺时针,最终x坐标,最终y坐标

    弧度(radians) = 角度(degrees) * Math.PI /180

    角度(degrees) = 弧度(radians) * 180 / Math.PI

    180 度大约等于 3.14…弧度。换句话讲,半圆为 pi 个弧度,整圆为 2 pi 个弧度,一个弧度大概为 57.29…度。

    large-arc-flag:true sweep-flag:true,大弧,顺时针

    large-arc-flag:true sweep-flag:false,大弧,逆时针

    large-arc-flag:true sweep-flag:false,小弧,顺时针

    large-arc-flag:false sweep-flag:false,小弧,逆时针

    画出40%在圆中所占的比例。

    初级饼图

    在javascript与flash的坐标系中,角度是以顺时针计算的,并以 0 度为起点 向正 X 轴引一条线,这就意味顺时针旋转角度为正角。逆时针就意味着为负角。

    sin求出y轴的值,cos求出x轴的值。

    • lineTo:画一条直线
    • cplineTo:画一条三次方贝塞尔曲线(传入三个参数)
    • curveTo:画一条方贝塞尔曲线(二次或三次)
    • qcurveTo:画一条二次方方贝塞尔曲线
    • arcTo:画一个弧(参数:rx, ry, large_arc_flag, sweep_flag, x2, y2)

    画虚线要用stroke-dasharray属性,同时不能共用stroke-width属性。

  • 相关阅读:
    HBase学习之路 (六)过滤器
    Caused by: java.lang.IllegalStateException: Ambiguous mapping. Cannot map 'userController' method
    Java简答题附答案
    Java习题附答案
    精选30道Java笔试题附答案分析
    Java数据结构面试题
    NoSuchBeanDefinitionException: No qualifying bean of type 'com.bj186.ssm.mapper.EmployeeMapper' available: expected at least 1 bean which qualifies as autowire candidate
    Caused by: java.lang.ClassNotFoundException: java.com.bj186.ssm.controller.UserController
    Caused by: java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/dispatcher-servlet.xml]
    Caused by: java.io.FileNotFoundException: Could not open ServletContext resource [/config/spring/applicationContext.xml]
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1572377.html
Copyright © 2011-2022 走看看