Hello HTML5: javascript+SVG+VML技术实现调色盘

这个色盘是通过javascript控制svg或vml的DOM来实现的。

Raphaël是一个高级的javascript图形库，在执行javascript效率高的浏览器上，例如Chrome,执行时，效果非常好。有人甚至用它做出了类似于CS枪战游戏的雏形http://raphaeljs.com/scape/，如果你对计算机图形学感兴趣，那非常值得研究一下这个库的源码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <!--© 2010 棉鞋 基于raphaeljs demo制作-->
  <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
    <title>ColorWheel</title> 
    <script src="http://media.hellohtml5.com/blogger/pages/colorwheel/raphael.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://media.hellohtml5.com/blogger/pages/colorwheel/colorwheel.js" type="text/javascript" charset="utf-8"></script>
    <script>
        window.onload=function(){
                     var cw = Raphael.colorwheel(40, 20, 300);
        }
    </script>
    <style>
        html,body{background:#efefef;color:#666;margin:0;padding:0;text-align:center;font-family:Arial;}
    </style>
  </head>
  <body>
  </body>
</html>

在线查看效果： http://media.hellohtml5.com/blogger/pages/colorwheel/

要了解更多关于SVG(Scalable Vector Graphics)的技术，点http://www.w3.org/Graphics/SVG/

要了解更多关于VML(Vector Markup Language)的技术，点http://www.w3.org/TR/NOTE-VML

javascript+SVG+VML技术实现调色盘

没有评论: