zoukankan      html  css  js  c++  java
  • [ javascript canvas 插件演示 ] canvas 插件演示

     1 <!DOCTYPE html>
     2 <html lang='zh-cn'>
     3 <head>
     4 <title>Insert you title</title>
     5 <meta name='description' content='this is my page'>
     6 <meta name='keywords' content='keyword1,keyword2,keyword3'>
     7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     8 <link rel='stylesheet' type='text/css' href='./css/index.css' />
     9 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
    10 <script type="text/javascript" src="js/jCanvaScript.1.5.18.min.js"></script>
    11 <style type='text/css'>
    12 html,body,img,canvas {
    13     margin: 0; padding: 0;
    14 }
    15 
    16 html {
    17     height: 100%;
    18 }
    19 
    20 body {
    21     background: #000;
    22 }
    23 
    24 #can {
    25     background: #FFF; display: block; margin: 25px auto; border-radius: 2px;
    26 }
    27 </style>
    28 <script type='text/javascript'>
    29     $( function(){
    30         var can = $( '#can' ).get( 0 );
    31         var oCan = can.getContext( '2d' );
    32         var strColor = getRandomColor();
    33         /* 
    34             js 插件应用 : 
    35                 地址: http://jcscript.com/
    36                 作用 : 使用面向对象的方法将canvas画图操作进行简化
    37                 用法 : 参照官网演示
    38         */
    39         jc.start( 'can' ); /* 开始绘制 参数 : idCanvas  */
    40         /* 
    41             传参形式:
    42                 rect(float x, float y, float width, float height)
    43                 rect(float x, float y, float width, float height, bool fill)
    44                 rect(float x, float y, float width, float height, string color)
    45                 rect(float x, float y, float width, float height, string color, bool fill)
    46                 rect(object parameters)
    47          */
    48         jc.rect( {
    49             'x' : 100 ,
    50             'y' : 50 ,
    51             'width' : 100 ,
    52             'height' : 100 ,
    53             'color' : strColor ,
    54             'fill' : 1  /* 参数 0 就是false 不填充只是勾勒图形 参数1 就是true 填充 */
    55         } );
    56         jc.start( 'can' ); /* 结束绘制 */
    57         function getRandomColor(){
    58             var num = '0xFFFFFF';
    59             var len = Math.ceil( Math.random() * parseInt( num , 16 ) ).toString( 16 );
    60             if( length < 6 ){
    61                 for( var i = 0 ; i < 6 - len.length ; i++ ){
    62                     len += '0';
    63                 }
    64             }
    65             return '#' + len;
    66         }
    67     } );
    68 </script>
    69 </head>
    70 <body>
    71     <canvas id='can' width='500' height='450'>检测到您的浏览器版本过低,请升级您的浏览器,以获取更好的体验效果...</canvas>
    72 </body>
    73 </html>
  • 相关阅读:
    设计模式笔记(22)状态模式(行为型)
    设计模式笔记(16)解释器模式(行为型)
    Lable和Literal控件的使用和区别
    设计模式笔记(15)命令模式(行为型)
    设计模式笔记(25)总结
    在JS方法中返回多个值的三种方法
    SQL 左外连接,右外连接,全连接,内连接
    面试集萃
    ASP.NET MVC如何使用Ajax的辅助方法
    ASP.NET MVC+EF框架+EasyUI实现权限管理(附源码)
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5959955.html
Copyright © 2011-2022 走看看