体彩排列5双期走势图

站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 涂鸦板简单实现 Html5编写属于自己的画画板
搜索:
您的位置: 主页 > 教程 > 网页设计 > html5 > » 正文

涂鸦板简单实现 Html5编写属于自己的画画板

来源: 易采站长站

最近了解到html5强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能有:画画,改色,调整画笔大小

html5的绘图可以分为点,线,面,圆,图片等,点和线,这可是所有平面效果的基点,有了这两个东西,没有画不出来的东西,只有想不到的算法。

先上代码了:

html

XML/HTML Code复制内容到剪贴板
  1. <body style="cursor:pointer">    <canvas id="mycavas" width="1024" height="400" style="border:solid 4px #000000"></canvas><!--画布-->  
  2.         <input type="color" id="color1" name="color1"/><!--设色器-->           <output name="a" for="color1" onforminput="innerHTML=color1.value"></output>  
  3.          <input type="range" name="points" id="size" min="5" max="20" /><!--拖动条-->   </body>     

效果:

好了,一个简陋的画图界面就搞好啦,下面开始写一些画线的代码 

JavaScript Code复制内容到剪贴板
  1. $.Draw = {};    $.extend($.Draw, {   
  2.     D2: "",        CX:"",   
  3.     Box: "mycavas",//画布id        BoxObj:function(){//画布对象   
  4.         this.CX=document.getElementById(this.Box);        },   
  5.     D2:function(){//2d绘图对象           this.D2 = this.CX.getContext("2d");   
  6.     },        Cricle: function (x, y, r, color) {//画圆   
  7.         if (this.D2) {                this.D2.beginPath();   
  8.             this.D2.arc(x, y, r, 0, Math.PI * 2, true);                this.D2.closePath();   
Tags:
最新图文资讯
1 2 3 4 5 6
体彩排列5双期走势图相关的文章列表:
南粤风采36选7游戏规则 河南福彩22选5和尾数走势图 福彩双色球201遗漏走势图 福彩双色球周四走势图 福彩七乐彩中奖规则 齐鲁风采23选5连号分布图 福彩双色球周日走势图 体彩超级大乐透复式计算器 体彩七星彩走势图 福彩双色球历史开奖号码 河北排列5开奖结果查询 河南22选5和值走势图 华东15选5中奖规则 体彩排列5双期走势图 体彩排列3走势图 超级大乐透定位走势图 华东15选5走势图 福彩双色球纵向三行走势图 福彩双色球中奖规则 福彩双色球蓝球走势图