首页 > 代码库 > [ javascript canvas 插件演示 ] canvas 插件演示
[ 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=http://www.mamicode.com/‘./css/index.css‘ />"color: #008080;"> 9 <script type=‘text/javascript‘ src=http://www.mamicode.com/‘./js/jquery-1.12.1.min.js‘></script>"color: #008080;">10 <script type="text/javascript" src="http://www.mamicode.com/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>
[ javascript canvas 插件演示 ] canvas 插件演示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。