1、时钟:

  1. <!doctype html>
  2. <html>
  3. <head></head>
  4. <body>
  5. <canvas id="clock" width="500" height="500">
  6. 您的浏览器不支持canvas标签,无法看到时钟
  7. </canvas>
  8. <script>
  9. var clock=document.getElementById('clock');
  10. var cxt=clock.getContext('2d');
  11. /*
  12. 1、获取画布
  13. 2、画图时首先需要设置画笔颜色,画笔画出的宽度。
  14. 3、开始路径。
  15. 4、画笔操作,比如画直线,矩形等。
  16. 5、关闭路径。
  17. 6、图像已经出来了,那么可以进行填充等。例如给圆填充颜色。
  18. 7、显示前面画出的结果。
  19.  
  20. */
  21. function drawClock(){
  22. //清除画布
  23. cxt.clearRect(0,0,500,500);
  24. var now =new Date();
  25. var sec=now.getSeconds();
  26. var min=now.getMinutes();
  27. var hour=now.getHours();
  28. //小时必须获取浮点类型(小时+分数转化成的小时)
  29. hour=hour+min/60;
  30. //问题 19:23:30
  31. //将24小时进制转换为12小时
  32. hour=hour>12?hour-12:hour;
  33.  
  34. //表盘(蓝色)
  35. cxt.lineWidth=10;
  36. cxt.strokeStyle="blue";
  37. cxt.beginPath();
  38. cxt.arc(250,250,200,0,360,false);
  39. cxt.closePath();
  40. cxt.fillStyle="#abcdef";
  41. cxt.fill();
  42. cxt.stroke();
  43. //刻度
  44. //时刻度
  45. for(var i=0;i<12;i++){
  46. cxt.save();
  47. //设置时针的粗细
  48. cxt.lineWidth=7;
  49. //设置时针的颜色
  50. cxt.strokeStyle="#000";
  51. //先设置0,0点
  52. cxt.translate(250,250);
  53. //再设置旋转角度
  54. cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
  55. cxt.beginPath();
  56. cxt.moveTo(0,-170);
  57. cxt.lineTo(0,-190);
  58. cxt.closePath();
  59. cxt.font="12px 宋体";//css font属性
  60. cxt.fillText(i+"",0,-170);
  61. cxt.stroke();
  62. cxt.restore();
  63. }
  64.  
  65. //分刻度
  66. for(var i=0;i<60;i++){
  67. cxt.save();
  68. //设置分刻度的粗细
  69. cxt.lineWidth=5;
  70. //设置颜色(使用时刻度的颜色)
  71. cxt.strokeStyle="#000";
  72. //设置或者重置画布的0,0点
  73. cxt.translate(250,250);
  74. //设置旋转角度
  75. cxt.rotate(i*6*Math.PI/180);
  76. //画分针刻度
  77. cxt.beginPath();
  78. cxt.moveTo(0,-180);
  79. cxt.lineTo(0,-190);
  80. cxt.closePath();
  81. cxt.stroke();
  82. cxt.restore();
  83. }
  84.  
  85. //时针
  86. cxt.save();
  87. //设置时针风格
  88. cxt.lineWidth=7;
  89. //设置时针的颜色
  90. cxt.strokeStyle="#000";
  91. //设置异次元空间的0,0点
  92. cxt.translate(250,250);
  93. //设置旋转角度
  94. cxt.rotate(hour*30*Math.PI/180);
  95. cxt.beginPath();
  96. cxt.moveTo(0,-140);
  97. cxt.lineTo(0,10);
  98. cxt.closePath();
  99. cxt.stroke();
  100. cxt.restore();
  101.  
  102. //分针
  103. cxt.save();
  104. //设置分针的风格
  105. cxt.lineWidth=5;
  106. cxt.strokeStyle="#000";
  107. //设置异次元空间分针画布的圆心
  108. cxt.translate(250,250);
  109. //设置旋转角度
  110. cxt.rotate(min*6*Math.PI/180);
  111. cxt.beginPath();
  112. cxt.moveTo(0,-160);
  113. cxt.lineTo(0,15);
  114. cxt.closePath();
  115. cxt.stroke();
  116. cxt.restore();
  117.  
  118. //秒针
  119.  
  120. cxt.save();
  121. //设置秒针的风格
  122. //颜色红色
  123. cxt.strokeStyle="red";
  124. //粗细 3像素
  125. cxt.lineWidth=3;
  126. //重置0,0点
  127. cxt.translate(250,250);
  128. //设置旋转角度
  129. cxt.rotate(sec*6*Math.PI/180);
  130. //画图
  131. cxt.beginPath();
  132. cxt.moveTo(0,-170);
  133. cxt.lineTo(0,20);
  134. cxt.closePath();
  135. cxt.stroke();
  136. //画出时针、分针、秒针的交叉点、
  137. cxt.beginPath();
  138. cxt.arc(0,0,5,0,360,false);
  139. cxt.closePath();
  140. //设置填充样式
  141. cxt.fillStyle="gray";
  142. cxt.fill();
  143. //设置笔触样式(秒针已设置)
  144. cxt.stroke();
  145. //设置秒针前段的小圆点
  146. cxt.beginPath();
  147. cxt.arc(0,-150,5,0,360,false);
  148. cxt.closePath();
  149. //设置填充样式
  150. cxt.fillStyle="gray";
  151. cxt.fill();
  152. //设置笔触样式(秒针已设置)
  153. cxt.stroke();
  154.  
  155. cxt.restore();
  156. }
  157. //使用setInterval(代码,毫秒时间) 让时钟动起来
  158. drawClock();
  159. setInterval(drawClock,1000);
  160. </script>
  161. </body>
  162. </html>

2、太阳系

  1. <!doctype html>
  2. <html>
  3. <head></head>
  4. <body>
  5. <canvas id="canvas" width="1000" height="1000" style="background:#000">
  6. 您的浏览器不支持canvas标签
  7. </canvas>
  8. <script>
  9. //设置2d绘图环境
  10. var cxt=document.getElementById('canvas').getContext('2d');
  11.  
  12. //轨道
  13. function drawTrack(){
  14. for(var i=0;i<8;i++){
  15. cxt.beginPath();
  16. cxt.arc(500,500,(i+1)*50,0,360,false);
  17. cxt.closePath();
  18. //设置笔触的颜色
  19. cxt.strokeStyle="#fff";
  20. cxt.stroke();
  21. }
  22.  
  23. }
  24. drawTrack();
  25. //星球
  26. function Star(x,y,radius,cycle,sColor,eColor){
  27. //画出星球需要哪些属性
  28. //星球的坐标点
  29. this.x=x;
  30. this.y=y;
  31. //星球的半径
  32. this.radius=radius;
  33. //公转周期
  34. this.cycle=cycle;
  35. //星球的颜色(开始色,结束色)
  36. this.sColor=sColor;
  37. this.eColor=eColor;
  38. //新建一个渐变颜色空对象
  39. this.color=null;
  40. //设置一个计时器
  41. this.time=0;
  42. this.draw=function(){
  43. //保存之前的画布内容
  44. cxt.save();
  45. //重置0,0坐标点
  46. cxt.translate(500,500);
  47. //设置旋转角度
  48. cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
  49. //画星球
  50. cxt.beginPath();
  51. cxt.arc(this.x,this.y,this.radius,0,360,false);
  52. cxt.closePath();
  53. //设置星球的填充颜色
  54. //新建渐变对象
  55. this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
  56. //设置渐变效果
  57. this.color.addColorStop(0,this.sColor);//渐变开始点和颜色
  58. this.color.addColorStop(1,this.eColor);//渐变结束点和颜色
  59. cxt.fillStyle=this.color;//将渐变对象复制给填充画笔
  60. //填充星球
  61. cxt.fill();
  62.  
  63. //恢复之前保存的画布内容
  64. cxt.restore();
  65. //执行完毕之后时间增加
  66. this.time+=1;
  67. }
  68. }
  69.  
  70. //创建一个太阳对象的构造函数
  71. function Sun(){
  72. Star.call(this,0,0,20,0,"#F00","#f90");
  73. }
  74. //创建一个水星的对象构造方法
  75. function Mercury(){
  76. Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
  77. }
  78. //创建一个金星的对象构造方法
  79. function Venus(){
  80. Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
  81. }
  82. //创建一个地球的对象构造方法
  83. function Earth(){
  84. Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12");
  85. }
  86. //创建一个火星的对象构造方法
  87. function Mars(){
  88. Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");
  89. }
  90. //创建一个木星的对象构造方法
  91. function Jupiter(){
  92. Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
  93. }
  94. //创建一个土星的对象构造方法
  95. function Saturn(){
  96. Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
  97. }
  98.  
  99. //创建一个天王星的对象构造方法
  100. function Uranus(){
  101. Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
  102. }
  103. //创建一个天王星的对象构造方法
  104. function Neptune(){
  105. Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
  106. }
  107.  
  108. //创建太阳对象实例
  109. var sun=new Sun();
  110. //创建水星对象实例
  111. var water=new Mercury();
  112. //创建金星对象实例
  113. var gold=new Venus();
  114. //创建一个地球对象实例
  115. var diqiu=new Earth();
  116. //创建一个火星对象实例
  117. var fire=new Mars();
  118. //创建一个木星对象实例
  119. var wood=new Jupiter();
  120. //创建一个土星对象实例
  121. var soil=new Saturn();
  122. //创建一个天王星对象实例
  123. var god=new Uranus();
  124. //创建一个海王星对象实例
  125. var sea=new Neptune();
  126.  
  127. function move(){
  128. //清除画布
  129. cxt.clearRect(0,0,1000,1000);
  130. //画出轨道
  131. drawTrack();
  132. //画出每个星球
  133. sun.draw();
  134. water.draw();
  135. gold.draw();
  136. diqiu.draw();
  137. fire.draw();
  138. wood.draw();
  139. soil.draw();
  140. god.draw();
  141. sea.draw();
  142. }
  143.  
  144. //使个星球进行运动
  145. setInterval(move,10);
  146. </script>
  147. </body>
  148. </html>

3、简单的画图软件
  css3样式:

  1. /*页面公共属性设置*/
  2. *{padding:;margin:;list-style:none;}
  3.  
  4. body{background:#ABCDEF}
  5. /*页面顶部属性设置*/
  6. #header{width:900px;height:80px;font-size:40px;margin:0 auto;text-align:center;line-height:80px}
  7. /*页面中间部分(画图板)属性*/
  8. #content{width:880px;height:550px;background:gray;margin:0 auto;padding:10px}
  9. #tool{height:150px;text-align:center}
  10. #tool li{float:left;width:175px;height:140px;background:#ccc;border-right:1px solid red}
  11. #image{text-align:left;padding:20px}
  12. #image li{height:30px;width:100px;list-style:square inside;border:}
  13. #image li button{background:gray;border:1px solid #000}
  14. #image li button:hover{background:gray;border:1px solid #FFF}
  15.  
  16. #means,#shape{padding:20px}
  17. #means li,#shape li{height:20px;width:40px;border:1px solid #000;margin-bottom:10px}
  18. #means li:hover,#shape li:hover{height:20px;width:40px;border:1px solid #fff;margin-bottom:10px}
  19. #means img,#shape img{height:20px;width:20px}
  20.  
  21. #size{padding:10px}
  22. #size li{height:20px;width:120px;border:1px solid #ccc}
  23. #size li:hover{height:20px;width:120px;border:1px solid #FFF}
  24.  
  25. #color{padding:25px}
  26. #color li{width:20px;height:20px;border:1px solid #000;margin-bottom:10px;margin-right:3px}
  27. #color li:hover{width:20px;height:20px;border:1px solid #fff;margin-bottom:10px;margin-right:3px}
  28. #color #red{background:red}
  29. #color #green{background:green}
  30. #color #blue{background:blue}
  31. #color #yellow{background:yellow}
  32. #color #white{background:white}
  33. #color #black{background:black}
  34. #color #pink{background:pink}
  35. #color #purple{background:purple}
  36. #color #cyan{background:cyan}
  37. #color #orange{background:orange}
  38.  
  39. #canvas{background:white}
  40. #canvas:hover{cursor:crosshair
  41. }
  42. /*页面底部属性设置*/
  43. #footer{width:900px;height:30px;margin:0 auto;text-align:center}

  js文件:

  1. var canvas=document.getElementById('canvas');
  2. var cxt=canvas.getContext('2d');
  3.  
  4. //获取工具按钮的标签
  5. //获取画笔标签
  6. var Brush=document.getElementById('means_brush');
  7. //获取橡皮标签
  8. var Eraser=document.getElementById('means_eraser');
  9. //获取油漆桶标签
  10. var Paint=document.getElementById('means_paint');
  11. //获取吸管标签
  12. var Straw=document.getElementById('means_straw');
  13. //获取文本标签
  14. var Text=document.getElementById('means_text');
  15. //获取放大镜标签
  16. var Magnifier=document.getElementById('means_magnifier');
  17.  
  18. //获取形状按钮的标签
  19. //获取画线标签
  20. var Line=document.getElementById('shape_line');
  21. //获取画圆圈的标签
  22. var Arc=document.getElementById('shape_arc');
  23. //获取画方框的标签
  24. var Rect=document.getElementById('shape_rect');
  25. //获取画多标签的标签
  26. var Poly=document.getElementById('shape_poly');
  27. //获取画圆形(填充)
  28. var ArcFill=document.getElementById('shape_arcfill');
  29. //获取画矩形的标签
  30. var RectFill=document.getElementById('shape_rectfill');
  31. //把12个工具和形状标签放到一个数组中
  32. var actions=[Brush,Eraser,Paint,Straw,Text,Magnifier,Line,Arc,Rect,Poly,ArcFill,RectFill];
  33.  
  34. //获取线宽按钮
  35. var Line_1=document.getElementById('width_1');
  36. var Line_3=document.getElementById('width_3');
  37. var Line_5=document.getElementById('width_5');
  38. var Line_8=document.getElementById('width_8');
  39. //把4中线宽对象放到一个数组中
  40. var widths=[Line_1,Line_3,Line_5,Line_8];
  41.  
  42. //获取颜色按钮
  43. var ColorRed=document.getElementById('red');
  44. var ColorGreen=document.getElementById('green');
  45. var ColorBlue=document.getElementById('blue');
  46. var ColorYellow=document.getElementById('yellow');
  47. var ColorWhite=document.getElementById('white');
  48. var ColorBlack=document.getElementById('black');
  49. var ColorPink=document.getElementById('pink');
  50. var ColorPurPle=document.getElementById('purple');
  51. var ColorCyan=document.getElementById('cyan');
  52. var ColorOrange=document.getElementById('orange');
  53. //把10中颜色标签对象放到一个数组中
  54. var colors=[ColorRed,ColorGreen,ColorBlue,ColorYellow,ColorWhite,ColorBlack,ColorPink,ColorPurPle,ColorCyan,ColorOrange];
  55.  
  56. //设置初始值
  57. //默认选中画笔工具
  58. drawBrush(0);
  59. //默认设置颜色
  60. setColor(ColorRed,0);
  61. //设置默认线宽
  62. setLineWidth(0);
  63.  
  64. //状态设置函数
  65. function setStatus(Arr,num,type){
  66. for(var i=0;i<Arr.length;i++){
  67. //设置选中的标签改变CSS属性
  68. if(i==num){
  69. //设置改变CSS的样式是背景色还是边框
  70. if(type==1){
  71. Arr[i].style.background="yellow";
  72. }else{
  73. Arr[i].style.border="1px solid #fff";
  74. }
  75.  
  76. }else{//设置未选中的组中的其他标签改变颜色
  77. if(type==1){
  78. Arr[i].style.background="#ccc";
  79. }else{
  80. Arr[i].style.border="1px solid #000";
  81. }
  82. }
  83. }
  84.  
  85. }
  86.  
  87. //设置图像功能函数 保存图片 清空画布
  88. function saveimg(){
  89. var imgdata=canvas.toDataURL();
  90. var b64=imgdata.substring(22);
  91. //alert(b64);
  92. //将form表单中的隐藏表单 赋值(值就是我们获取的b64)
  93. var data=document.getElementById('data');
  94. data.value=b64;
  95. //将表单提交到后台//http://localhost/down.php
  96. var form=document.getElementById('myform');
  97. form.submit();
  98. }
  99. //清空画布
  100. function clearimg(){
  101. //画布清除方法
  102. cxt.clearRect(0,0,880,400);
  103. }
  104.  
  105. //列出所有的按钮对应的函数
  106. //铅笔工具函数
  107. function drawBrush(num){
  108. setStatus(actions,num,1);
  109. var flag=0;//设置标志位->检测鼠标是否按下
  110. canvas.onmousedown=function(evt){
  111. evt=window.event||evt;
  112. var startX=evt.pageX-this.offsetLeft;
  113. var startY=evt.pageY-this.offsetTop;
  114. cxt.beginPath();
  115. cxt.moveTo(startX,startY);
  116. flag=1;
  117. }
  118.  
  119. //鼠标移动的时候->不同的绘图(获取鼠标的位置)
  120. canvas.onmousemove=function(evt){
  121. evt=window.event||evt;
  122. var endX=evt.pageX-this.offsetLeft;
  123. var endY=evt.pageY-this.offsetTop;
  124. //判断一下鼠标是否按下
  125. if(flag){
  126. //移动的时候设置路径并且画出来
  127. cxt.lineTo(endX,endY);
  128. cxt.stroke();
  129. }
  130.  
  131. }
  132.  
  133. //鼠标抬起的时候结束绘图
  134. canvas.onmouseup=function(){
  135. flag=0;
  136. }
  137.  
  138. //鼠标移出canvas的时候必须取消画图操作
  139. canvas.onmouseout=function(){
  140. flag=0;
  141. }
  142. }
  143.  
  144. var eraserFlag=0;//设置橡皮擦的状态标志位
  145. //橡皮工具函数
  146. function drawEraser(num){
  147. setStatus(actions,num,1);
  148. canvas.onmousedown=function(evt){
  149. evt=window.event||evt;
  150. var eraserX=evt.pageX-this.offsetLeft;
  151. var eraserY=evt.pageY-this.offsetTop;
  152. //canvas擦出方法 cxt.clearRect();
  153. cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
  154. eraserFlag=1;
  155. }
  156. //随着鼠标移动不停地擦出
  157. canvas.onmousemove=function(evt){
  158. evt=window.event||evt;
  159. var eraserX=evt.pageX-this.offsetLeft;
  160. var eraserY=evt.pageY-this.offsetTop;
  161. // 擦除方法
  162. if(eraserFlag){//判断鼠标左键是否按下(按下的情况下拖动鼠标才能删除)
  163. cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
  164. }
  165.  
  166. }
  167. //抬起鼠标按键 清除擦出的状态位 变成0
  168. canvas.onmouseup=function(){
  169. eraserFlag=0;
  170. }
  171. //抬起鼠标移出画布 清除擦出的状态位 变成0
  172. canvas.onmouseout=function(){
  173. eraserFlag=0;
  174. }
  175. }
  176.  
  177. //油漆桶工具函数
  178. function drawPaint(num){
  179. setStatus(actions,num,1);
  180. canvas.onmousedown=function(){
  181. //把画布涂成指定的颜色->画一个填充颜色的矩形
  182. cxt.fillRect(0,0,880,400);
  183. }
  184. canvas.onmouseup=null;
  185. canvas.onmousemove=null;
  186. canvas.onmouseout=null;
  187. }
  188.  
  189. //吸管工具函数
  190. function drawStraw(num){
  191. setStatus(actions,num,1);
  192. canvas.onmousedown=function(evt){
  193. evt=window.event||evt;
  194. var strawX=evt.pageX-this.offsetLeft;
  195. var strawY=evt.pageY-this.offsetTop;
  196. //获取该点坐标处的颜色信息
  197. //获取图像信息的方法getImageData(开始点X,开始点Y,宽度,高度)
  198. var obj=cxt.getImageData(strawX,strawY,1,1);
  199. //alert(obj.data[3]);//ImageData对象
  200. //obj.data=[红,绿,蓝色,透明度]//1像素的数据
  201. //注意:在data数组中,每4个数组元素表示canvas画布中的一个像素点,
  202. //这4个元素的取值范围都是0-255
  203. /*obj.data=[
  204. 红,绿,蓝色,透明度,
  205. 红,绿,蓝色,透明度,
  206. 红,绿,蓝色,透明度,
  207. 红,绿,蓝色,透明度,
  208. 红,绿,蓝色,透明度,
  209. 红,绿,蓝色,透明度,
  210. 红,绿,蓝色,透明度,
  211. 红,绿,蓝色,透明度,
  212. ]//多像素的数据
  213.  
  214. */
  215.  
  216. //红色的RGB(255,0,0)
  217. //绿色的RGB(0,255,0);
  218. var color='rgb('+obj.data[0]+','+obj.data[1]+','+obj.data[2]+')';
  219. //将吸管吸出的颜色设定到我们的应用中
  220. cxt.strokeStyle=color;
  221. cxt.fillStyle=color;
  222. //颜色吸取吸取之后自动选中画笔工具
  223. drawBrush(0);
  224. }
  225. //取消移动事件 、鼠标抬起事件、鼠标移出事件
  226. canvas.onmousemove=null;
  227. canvas.onmouseup=null;
  228. canvas.onmouseout=null;
  229.  
  230. }
  231.  
  232. //文本工具函数
  233. function drawText(num){
  234. setStatus(actions,num,1);
  235. canvas.onmousedown=function(evt){
  236. evt=window.event||evt;
  237. //获取鼠标点击时的位置
  238. var textX=evt.pageX-this.offsetLeft;
  239. var textY=evt.pageY-this.offsetTop;
  240. //alert(textX+'------'+textY);
  241. //获取用户输入的信息
  242. //window.prompt(对话框提示,默认值);
  243. var userVal=window.prompt('请在这里输入文字','');
  244. //alert(userVal);
  245. //将用户输入的文字写到画布中对应的坐标点上。
  246. if(userVal!=null){
  247. cxt.fillText(userVal,textX,textY);
  248. }
  249.  
  250. }
  251. canvas.onmousemove=null;
  252. canvas.onmouseup=null;
  253. canvas.onmouseout=null;
  254. }
  255.  
  256. //放大镜工具函数
  257. function drawMagnifier(num){
  258. setStatus(actions,num,1);
  259. //用户输入的数据大小
  260. var scale=window.prompt('请输入要放大的百分比[只能是整型]','100');
  261. //吧数据转成对应canvas画布的大小
  262. var scaleW=880*scale/100;
  263. var scaleH=400*scale/100;
  264. //将数据设置到对应HTML标签上
  265. canvas.style.width=parseInt(scaleW)+'px';
  266. canvas.style.height=parseInt(scaleH)+'px';
  267. }
  268.  
  269. //线形状函数
  270. function drawLine(num){
  271. setStatus(actions,num,1);
  272. canvas.onmousedown=function(evt){
  273. evt=window.event||evt;
  274. //获取起始点的坐标(相对于canvas画布的)
  275. //先获取鼠标距离页面顶端的距离和左端的距离
  276. //evt.pageY evt.pageX
  277. //获取当前画布相对页面顶端和左端的距离
  278. //this.offectTop this.offsetLeft
  279.  
  280. //计算当前鼠标相对于canvas画布的距离(以canvas的左上角为0,0)
  281. var startX=evt.pageX-this.offsetLeft;
  282. var startY=evt.pageY-this.offsetTop;
  283. //设置直线的开始点
  284. cxt.beginPath();//尽量写上开始新路径
  285. cxt.moveTo(startX,startY);
  286. }
  287. canvas.onmousemove=null;//注销掉其他工具注册时间
  288. canvas.onmouseout=null;//
  289. //鼠标按键抬起的时候
  290. canvas.onmouseup=function(evt){
  291. //计算鼠标抬起时鼠标相对于画布的坐标
  292. var endX=evt.pageX-this.offsetLeft;
  293. var endY=evt.pageY-this.offsetTop;
  294. //设置路径吧开始点和结束点连接起来,然后进行绘图
  295. cxt.lineTo(endX,endY);
  296. cxt.closePath();
  297. cxt.stroke();
  298. }
  299. }
  300. //将变量设置为全局变量(如果是局部变量在其他的函数中无法调用)
  301. var arcX=0;
  302. var arcY=0;
  303. //圆形形状函数
  304. function drawArc(num){
  305. setStatus(actions,num,1);
  306. canvas.onmousedown=function(evt){
  307. evt=window.event||evt;
  308. //获取圆心的位置
  309. arcX=evt.pageX-this.offsetLeft;
  310. arcY=evt.pageY-this.offsetTop;
  311. }
  312.  
  313. canvas.onmouseup=function(evt){
  314. evt=window.event||evt;
  315. //获取半径(目的)
  316. //实际获取的是一个坐标
  317. var endX=evt.pageX-this.offsetLeft;
  318. var endY=evt.pageY-this.offsetTop;
  319. //计算C的距离
  320. var a=endX-arcX;
  321. var b=endY-arcY;
  322. //计算半径
  323. var c=Math.sqrt(a*a+b*b);
  324. cxt.beginPath();
  325. cxt.arc(arcX,arcY,c,0,360,false);
  326. cxt.closePath();
  327. cxt.stroke();
  328. }
  329. canvas.onmousemove=null;//注销掉鼠标移动时间
  330. canvas.onmouseout=null;
  331. }
  332. //设置矩形全局变量
  333. var rectX=0;
  334. var rectY=0;
  335. //矩形形状函数
  336. function drawRect(num){
  337. setStatus(actions,num,1);
  338. canvas.onmousedown=function(evt){
  339. evt=window.event||evt;
  340. //获取矩形左上角(对角线的开始点)
  341. rectX=evt.pageX-this.offsetLeft;
  342. rectY=evt.pageY-this.offsetTop;
  343.  
  344. }
  345.  
  346. canvas.onmouseup=function(evt){
  347. evt=window.event||evt;
  348. //先获取鼠标的当前坐标
  349. var endX=evt.pageX-this.offsetLeft;
  350. var endY=evt.pageY-this.offsetTop;
  351. //计算矩形的宽高
  352. var rectW=endX-rectX;
  353. var rectH=endY-rectY;
  354. //画出矩形
  355. cxt.strokeRect(rectX,rectY,rectW,rectH);
  356. }
  357. canvas.onmousemove=null;
  358. canvas.onmouseout=null;
  359. }
  360.  
  361. var polyX=0;
  362. var polyY=0;
  363. //多边形形状函数
  364. function drawPoly(num){
  365. setStatus(actions,num,1);
  366. canvas.onmousedown=function(evt){
  367. evt=window.event||evt;
  368. polyX=evt.pageX-this.offsetLeft;
  369. POLyY=evt.pageY-this.offsetTop;
  370. }
  371. canvas.onmouseup=function(evt){
  372. evt=window.event||evt;
  373. var endX=evt.pageX-this.offsetLeft;
  374. var endY=evt.pageY-this.offsetTop;
  375. cxt.beginPath();
  376. //将画笔移动到右下角的顶点
  377. cxt.moveTo(endX,endY);
  378. //计算左下角的顶点坐标
  379. var lbX=2*polyX-endX;
  380. var lbY=endY;
  381. cxt.lineTo(lbX,lbY);
  382. //设置第三个顶点的坐标
  383. var tmpC=2*(endX-polyX);
  384. var tmpA=endX-polyX;
  385. var tmpB=Math.sqrt(tmpC*tmpC-tmpA*tmpA);
  386. //计算最上面顶点坐标
  387. //endY-tmpB 定点的Y坐标 polyX是顶点的X坐标
  388. //画到顶点
  389. cxt.lineTo(polyX,endY-tmpB);
  390. //封闭路径->画出来
  391. cxt.closePath();
  392. cxt.stroke();
  393. }
  394. canvas.onmousemove=null;
  395. canvas.onmouseout=null;
  396. }
  397.  
  398. //圆形填充形状函数
  399. function drawArcFill(num){
  400. setStatus(actions,num,1);
  401. canvas.onmousedown=function(evt){
  402. evt=window.event||evt;
  403. //获取圆心的位置
  404. arcX=evt.pageX-this.offsetLeft;
  405. arcY=evt.pageY-this.offsetTop;
  406. }
  407.  
  408. canvas.onmouseup=function(evt){
  409. evt=window.event||evt;
  410. //获取半径(目的)
  411. //实际获取的是一个坐标
  412. var endX=evt.pageX-this.offsetLeft;
  413. var endY=evt.pageY-this.offsetTop;
  414. //计算C的距离
  415. var a=endX-arcX;
  416. var b=endY-arcY;
  417. //计算半径
  418. var c=Math.sqrt(a*a+b*b);
  419. cxt.beginPath();
  420. cxt.arc(arcX,arcY,c,0,360,false);
  421. cxt.closePath();
  422. cxt.fill();
  423. }
  424. canvas.onmousemove=null;//注销掉鼠标移动时间
  425. canvas.onmouseout=null;
  426. }
  427.  
  428. //矩形填充形状函数
  429. function drawRectFill(num){
  430. setStatus(actions,num,1);
  431. setStatus(actions,num,1);
  432. canvas.onmousedown=function(evt){
  433. evt=window.event||evt;
  434. //获取矩形左上角(对角线的开始点)
  435. rectX=evt.pageX-this.offsetLeft;
  436. rectY=evt.pageY-this.offsetTop;
  437.  
  438. }
  439.  
  440. canvas.onmouseup=function(evt){
  441. evt=window.event||evt;
  442. //先获取鼠标的当前坐标
  443. var endX=evt.pageX-this.offsetLeft;
  444. var endY=evt.pageY-this.offsetTop;
  445. //计算矩形的宽高
  446. var rectW=endX-rectX;
  447. var rectH=endY-rectY;
  448. //画出矩形
  449. cxt.fillRect(rectX,rectY,rectW,rectH);
  450. }
  451. canvas.onmousemove=null;
  452. canvas.onmouseout=null;
  453. }
  454.  
  455. //线宽设置函数
  456. function setLineWidth(num){
  457. setStatus(widths,num,1);
  458. switch(num){
  459. case 0:
  460. cxt.lineWidth=1;
  461. break;
  462. case 1:
  463. cxt.lineWidth=3;
  464. break;
  465. case 2:
  466. cxt.lineWidth=5;
  467. break;//第14讲补充的break 原因:遗漏
  468. case 3:
  469. cxt.lineWidth=8;
  470. break;
  471. default:
  472. cxt.lineWidth=1;
  473.  
  474. }
  475. }
  476.  
  477. //颜色设置函数
  478. function setColor(obj,num){
  479. setStatus(colors,num,0);
  480. //设置画笔颜色和填充颜色
  481. cxt.strokeStyle=obj.id;
  482. cxt.fillStyle=obj.id;
  483. }

html文件:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>HTML5在线画图板</title>
  6. <link href="canvas.css" type="text/css" rel="stylesheet" />
  7. </head>
  8. <body>
  9. <header id="header">HTML5在线画板</header>
  10. <section id="content">
  11. <!--工具区域-->
  12. <ul id="tool">
  13. <li>
  14. <h3>图像</h3>
  15. <hr />
  16. <ul id="image">
  17. <li id="saveimg">
  18. <form id="myform" action="http://localhost/down.php" method="post">
  19. <input type="hidden" id="data" name="data" value="" />
  20. <button onclick="saveimg()" type="button">保存图片</button>
  21. </form>
  22. </li>
  23. <li id="clearimg"><button onclick="clearimg()">清空画板</button></li>
  24. </ul>
  25. </li>
  26. <li>
  27. <h3>工具</h3>
  28. <hr />
  29. <ul id="means">
  30. <li id="means_brush" onclick="drawBrush(0)">
  31. <img src="data:images/Brush.png" />
  32. </li>
  33. <li id="means_eraser" onclick="drawEraser(1)">
  34. <img src="data:images/Eraser.png" />
  35. </li>
  36. <li id="means_paint" onclick="drawPaint(2)">
  37. <img src="data:images/Paint.png" />
  38. </li>
  39. <li id="means_straw" onclick="drawStraw(3)">
  40. <img src="data:images/Straw.png" />
  41. </li>
  42. <li id="means_text" onclick="drawText(4)">
  43. <img src="data:images/text.png" />
  44. </li>
  45. <li id="means_magnifier" onclick="drawMagnifier(5)"><img src="data:images/Magnifier.png" /></li>
  46. </ul>
  47. </li>
  48. <li>
  49. <h3>形状</h3>
  50. <hr />
  51. <ul id="shape">
  52. <li id="shape_line" onclick="drawLine(6)">
  53. <img src="data:images/line.png" />
  54. </li>
  55. <li id="shape_arc" onclick="drawArc(7)">
  56. <img src="data:images/arc.png" />
  57. </li>
  58. <li id="shape_rect" onclick="drawRect(8)">
  59. <img src="data:images/rect.png" />
  60. </li>
  61. <li id="shape_poly" onclick="drawPoly(9)">
  62. <img src="data:images/poly.png" />
  63. </li>
  64. <li id="shape_arcfill" onclick="drawArcFill(10)">
  65. <img src="data:images/arcfill.png" />
  66. </li>
  67. <li id="shape_rectfill" onclick="drawRectFill(11)">
  68. <img src="data:images/rectfill.png" />
  69. </li>
  70. </ul>
  71. </li>
  72. <li>
  73. <h3>线宽</h3>
  74. <hr />
  75. <ul id="size">
  76. <li id="width_1" onclick="setLineWidth(0)">
  77. <img src="data:images/line1px.png" />
  78. </li>
  79. <li id="width_3" onclick="setLineWidth(1)">
  80. <img src="data:images/line3px.png" />
  81. </li>
  82. <li id="width_5" onclick="setLineWidth(2)">
  83. <img src="data:images/line5px.png" />
  84. </li>
  85. <li id="width_8" onclick="setLineWidth(3)">
  86. <img src="data:images/line8px.png" />
  87. </li>
  88. </ul>
  89. </li>
  90. <li>
  91. <h3>颜色</h3>
  92. <hr />
  93. <ul id="color">
  94. <li id="red" onclick="setColor(this,0)"></li>
  95. <li id="green" onclick="setColor(this,1)"></li>
  96. <li id="blue" onclick="setColor(this,2)"></li>
  97. <li id="yellow" onclick="setColor(this,3)"></li>
  98. <li id="white" onclick="setColor(this,4)"></li>
  99. <li id="black" onclick="setColor(this,5)"></li>
  100. <li id="pink" onclick="setColor(this,6)"></li>
  101. <li id="purple" onclick="setColor(this,7)"></li>
  102. <li id="cyan" onclick="setColor(this,8)"></li>
  103. <li id="orange" onclick="setColor(this,9)"></li>
  104. </ul>
  105. </li>
  106. </ul>
  107. <!--绘图区域-->
  108. <canvas id="canvas" width="880" height="400">
  109. 您的浏览器不支持canvas标签,请升级浏览器
  110. </canvas>
  111. <!--请在canvas标签之后连入JS文件--->
  112. <script src="canvas.js"></script>
  113. </section>
  114. <footer id="footer">
  115. <small>版权所有,盗版不究 @ LAMP兄弟连丛浩</small>
  116. </footer>
  117. </body>
  118. </html>

HTML5 小实例的更多相关文章

  1. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 【HTML5】实例练习

    1.许多时髦的网站都提供视频.如果在网页上展示视频? <!DOCTYPE HTML> <html> <body> <video width="320 ...

  3. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  4. winform 异步读取数据 小实例

    这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...

  5. CSS应用内容补充及小实例

    一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. Objective-C之代理设计模式小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  7. Objective-C之@类别小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  8. OC小实例关于init方法不小心的错误

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  9. canva实践小实例 —— 马赛克效果

    前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大 ...

随机推荐

  1. linux_api之进程环境

    本篇索引: 1.引言 2.main函数 3.进程的终止方式 4.exit和_exit函数 5.atexit函数 7.环境表 8.C程序程序空间布局 9.存储空间的手动分配 10.库文件 1.引言 一个 ...

  2. pat1013. Battle Over Cities (25)

    1013. Battle Over Cities (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue It ...

  3. DevExpress 14.2 批量汉化

    1.下载DevExpress_.NET_Localization_Resources_14.2汉化包 2.解压后将zh-CN或zh-CHS复制到安装目录如D:\Program Files (x86)\ ...

  4. C#利用事件与委托进行窗体间传值简单小例子

    本篇博客是利用C#委托与事件进行窗体间传值的简单小例子 委托与事件的详细解释大家可以参照张子阳的博客: http://www.tracefact.net/CSharp-Programming/Dele ...

  5. PAT 1021 Deepest Root

    #include <cstdio> #include <cstdlib> #include <vector> using namespace std; class ...

  6. 【代码笔记】Java连连看项目的实现(1)——JTable 、TableModel的使用

    javax.swing.table.TableModel和javax.swing.JTable JTable .TableModel是Java里面画表格的包. TableModel:为Table提供显 ...

  7. String字符串操作

    char chars[] ={'a','b','c'}; String s = new String(chars); int len = s.length();//字符串长度 System.out.p ...

  8. php基础--取默认值以及类的继承

    (1)对于php的默认值的使用和C++有点类似,都是在函数的输入中填写默认值,以下是php方法中对于默认值的应用: <?phpfunction makecoffee($types = array ...

  9. HTML 5入门知识(四)

    表单的作用 表单不是表格,既不用来显示数据,也不用来布局网页.表单提供一个界面,一个入口,便于用户把数据提交给后台程序进行处理. 表单的数据传递方式method属性 表单的method属性用于指定在数 ...

  10. SQL 创建自定义方法,匹配正则

    C#代码 using System.Text.RegularExpressions; public class FunctionRegex { [Microsoft.SqlServer.Server. ...