玩转 html5 (二) ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)

在html5中可以使用canvas标签在画布上画图，先直接上代码，这篇文章先简单介绍一下canvas的使用方法，简单画几个圆，矩形，三角形，写字。

在代码中均给出了注释，在这里特别强调的一点是：使用canvas画图时有时候必须beginPath和colsePath,但有时不需要，为了防止出现问题，可以在每次重新画一个图时重新开启路径，画完后关闭路径。

这些代码是在猎豹浏览器上实现的，有些浏览器可能不支持。

[html] view plaincopy

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <html>
  4. <body>
  5. <canvas  width="500" height="500" id="canvas" style="background:yellow">
  6. 您的浏览器不支持canvas
  7. </canvas>
  8. <script>
  9. //获取画布
  10. var canvas=document.getElementById(‘canvas‘);
  11. //alert(canvas);
  12. //设置绘图环境
  13. var cxt=canvas.getContext(‘2d‘);
  14. //画一条线段
  15. //开始新路径，第一笔可以不写
  16. cxt.beginPath();
  17. //设置画笔宽度
  18. cxt.lineWidth=4;
  19. //设置画笔颜色
  20. cxt.strokeStyle="red";
  21. //笔从哪开始画
  22. cxt.moveTo(20,20);
  23. //给出终点
  24. cxt.lineTo(100,20);
  25. //开始画
  26. cxt.stroke();
  27. //封闭路径
  28. cxt.closePath();
  29. //画空心圆
  30. //开始新路径
  31. cxt.beginPath();
  32. //路径函数 x,y,r,角度范围,顺时针/逆时针
  33. cxt.arc(100,100,50,0,360,false);
  34. cxt.stroke();
  35. cxt.closePath();
  36. //画实心圆
  37. cxt.beginPath();
  38. //设置填充颜色
  39. cxt.fillStyle="blue";
  40. cxt.arc(100,200,50,0,360,false);
  41. //实心
  42. cxt.fill();
  43. //在画个圆，不填充，加边框，可不画
  44. cxt.stroke();
  45. cxt.closePath();
  46. //画矩形
  47. //矩形函数 x,y,长宽
  48. cxt.beginPath();
  49. cxt.rect(200,100,50,60);
  50. cxt.stroke();
  51. cxt.closePath();
  52. //其他方法
  53. cxt.beginPath();
  54. cxt.strokeRect(200,190,120,20);
  55. cxt.closePath();
  56. //实心矩形
  57. cxt.beginPath();
  58. cxt.rect(200,220,50,50);
  59. cxt.fill();
  60. cxt.closePath();
  61. //其他方法
  62. cxt.fillRect(200,280,50,50);
  63. //写字
  64. cxt.font="40px 黑体 ";
  65. //实心字
  66. cxt.fillText("暗伤无痕",300,50);
  67. //空心字
  68. //将笔触调细
  69. cxt.lineWidth="1";
  70. cxt.strokeText("暗伤无痕",300,100);
  71. //将图片画到画板上  猎豹不支持
  72. var img=new Image();
  73. img.src="1.jpg";
  74. cxt.drawImage(img,300,400,100,100);
  75. //画一个三角形
  76. cxt.beginPath();
  77. //移动至开始点
  78. cxt.moveTo(300,100);
  79. cxt.lineTo(300,200);
  80. cxt.lineTo(350,150);
  81. cxt.closePath();//三角形需要先闭合路径再画
  82. //空心
  83. //cxt.stroke();
  84. //实心
  85. cxt.fill();
  86. //旋转图片
  87. //设置旋转环境
  88. cxt.save();
  89. //在异次元空间重置0,0点位置
  90. cxt.translate(20,20);
  91. //图片/x形状旋转
  92. //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
  93. //
  94. cxt.rotate(-30*Math.PI/180);
  95. //旋转线段
  96. cxt.beginPath();
  97. cxt.lineWidth=4;
  98. cxt.moveTo(0,0);
  99. cxt.lineTo(20,100);
  100. cxt.stroke();
  101. cxt.closePath();
  102. //将旋转后的图片返回原画布
  103. cxt.restore();
  104. </script>
  105. </body>
  106. </html>
时间： 2024-08-01 19:39:13

玩转 html5 (二) ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)的相关文章

玩转html5（二）----用canvas结合脚本在画布上画简单的图（html5又一强大功能）

在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题,可以在每次重新画一个图时重新开启路径,画完后关闭路径. 这些代码是在猎豹浏览器上实现的,有些浏览器可能不支持. <!DOCTYPE html> <meta charset="utf-8

超详细，用canvas在微信小程序上画时钟教程

最近开始学习canvas,看了慕课网的一个视频,开始自己动手在微信小程序上画个时钟, 首先我们可以先看以下微信小程序的官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html 和canvas的手册对比:http://www.w3school.com.cn/tags/html_ref_canvas.asp 我觉得其实除了删减一些内容之外没什么太大的区别 直接贴代码: wxml <!--index.wxml-->

HTML5：使用Canvas和Input range控件放大缩小图片

引自:http://blog.csdn.net/ClementAD/article/details/48938261 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片缩放</title> </head> <body style="background: black;"> <canvas id

HTML5新标签&lt;canvas&gt;

基本用法 首先在body中写个<canvas>,设定大小,个人建议大小要在行内设置,不然在部分情况下会发生错误. CSS部分 给canvas加个边框,这边框只是为了方便看出canvas的边界,加不加都可以. <style type="text/css"> canvas{ border:1px solid #000; } </style> HTML部分 <canvas id="canvas" width="500&q

HTML5(简介、视频、音频、画布)

HTML5(简介.视频.音频.画布) HTML5目标是替换1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到匹配当代的网络需求.HTML5将成为HTML\XHTML\HTML DOM的新标准. 广义论及HTML5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA),例如

利用Jquery使用HTML5的FormData属性实现对文件的上传

1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我们很容易的实现对文件的上传,只需要利用HTML5的一个FormData属性,结合Jquery就很容易实现文件的上传,而且读取文件的上传进度,下面这个上传案例就是基于上面所说的实现的,下面我将所所有的JS和CSS以及HTML页面代码放在下面. 注意事项:FormData属性必须依赖于HTML5,所以如

HTML5中的 Canvas

什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形. 我们可以用Canvas做以下: 1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位.HTML5在基于Web的图像显示方面比Flash更加立体.更加精巧,运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥

浅析PHP程序员必要了解html5绘画标签&lt;canvas&gt;

目前HTML5还在大行其道,伴随产生了很多新的代码办法. 其中一个便是基于HTML5的游戏,例如微信推广中用到的小游戏------神经猫 或可以单独下载运行的萌宠消除类型游戏 这样的小游戏大多数都是通过一个html5的新增<canvas>标签实现的,这个标签有一套自己的编程接口(canvas API),专门用来绘制图形,可以实现一系列漂亮的图形与图像,创建出更好更丰富的新一代web页面,canvas标签通过JavaScript语言的画布,以及脚本来进行图像的绘制. 接下来我们来了解canvas

IE下及标准浏览器下的图片旋转（二）—— Canvas（1）

文章过长,一篇无法保存. IE下及标准浏览器下的图片旋转(一)——滤镜,CSS3 3. canvas canvas 是html5中的新标签,使用canvas之前我们先看下它的定义:<canvas> 标签只是图形容器,您必须使用脚本来绘制图形.这个标 签是用来绘图的,包括2d和3d,拥有很多方法,因为我们只是拿来实现图片的旋转,所以只需要了解其中的3个方法即可,关于canvas的详细使用会写在 以后的篇幅中. 先讲下canvas实现旋转图片的原理:canvas标签相当于创建一个画布,不仅可以在上