代码Canvas.htm

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>canvas简单应用画各种图形状</title>
  5. </head>
  6. <!--<script language="javascript" src="jquery-1.8.3.js"></script>-->
  7. <script language="javascript" type="text/javascript">
  8. //通过画线段构造三角形
  9. function draw_triangle(x1,y1,x2,y2,x3,y3){
  10. var c = document.getElementById("canvas1");
  11. var cxt = c.getContext("2d");
  12. cxt.moveTo(x1,y1);
  13. cxt.lineTo(x2,y2);
  14. cxt.lineTo(x3,y3);
  15. cxt.lineTo(x1,y1);
  16. cxt.stroke();
  17. }
  18. //画三角进一步封装
  19. function draw(){
  20. draw_triangle(100,50,300,200,150,100);
  21. }
  22. //向canvas原型对象添加画扇形方法
  23. CanvasRenderingContext2D.prototype.selector=function(x,y,radius,sDeg,eDeg){
  24. //保存初始状态
  25. this.save();
  26. // 位移到目标点
  27. this.translate(x, y);
  28. this.beginPath();
  29. // 画出圆弧
  30. this.arc(0,0,radius,sDeg, eDeg);
  31. // 再次保存以备旋转
  32. this.save();
  33. // 旋转至起始角度
  34. this.rotate(eDeg);
  35. // 移动到终点，准备连接终点与圆心
  36. this.moveTo(radius,0);
  37. // 连接到圆心
  38. this.lineTo(0,0);
  39. // 还原
  40. this.restore();
  41. // 旋转至起点角度
  42. this.rotate(sDeg);
  43. // 从圆心连接到起点
  44. this.lineTo(radius,0);
  45. this.closePath();
  46. // 还原到最初保存的状态
  47. this.restore();
  48. return this;
  49. }
  50. function b(){
  51. var c = document.getElementById("canvas1");
  52. var cxt = c.getContext("2d");
  53. //画线
  54. /**cxt.moveTo(10,10);
  55. cxt.lineTo(60,80);
  56. cxt.stroke();**/
  57. //画图片
  58. /*cxt.beginPath();
  59. var img = new Image();
  60. img.src = 'b.jpg';
  61. img.onload=function(){
  62. cxt.drawImage(img,0,0);*/
  63. //画圆环
  64. /*cxt.clearRect(0,0,1200,400);
  65. cxt.beginPath();
  66. cxt.arc(300,100,60,Math.PI*2,false);
  67. cxt.closePath();
  68. cxt.fill();
  69. cxt.fillStyle="white";
  70. cxt.beginPath();
  71. cxt.arc(300,100,50,Math.PI*2,false);
  72. cxt.closePath();
  73. cxt.fill();*/
  74. //画圆弧
  75. cxt.selector(100,100,50,0,Math.PI*0.75);
  76. }
  77. </script>
  78. <body onload="b();">
  79. <!--<canvas id="cans" width="500px" height="300px" style="border:1px solid red;">浏览器不支持canvas</canvas>-->
  80. <canvas id="canvas1" width="1200" height="400" style="border:1px solid red">浏览器不支持该功能</canvas>
  81. <button onclick="draw()">start</button>
  82. </body>
  83. </html>

　　

运行效果：三角和圆弧

canvas常用画法整理的更多相关文章

  1. NiosII常用函数整理

    NiosII常用函数整理 IO操作函数函数原型:IORD(BASE, REGNUM) 输入参数:BASE为寄存器的基地址,REGNUM为寄存器的偏移量函数说明:从基地址为BASE的设备中读取寄存器中偏 ...

  2. MAC机常用快捷键整理表格

    MAC机常用快捷键整理表格 范围 快捷键 说明 图形   (Command 键)在某些 Apple 键盘上,此键也可能为标志()     Control (Control 键)     Alt Opt ...

  3. sublime常用快捷键整理(未完待续)

    sublime常用快捷键整理: 基本操作 cmd+o 打开文件 cmd+w 关闭当前tab cmd+n 打开新页 cmd+shift+n 打开刚刚关闭的页签 一.选择命令 1.多个单词选择 cmd+d ...

  4. zendStudio常用快捷键整理

    在来一发zendstudio的常用快捷键整理,今天心情不错哈哈 Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ct ...

  5. 常用DOM整理

    常用DOM整理   前言: html为document搭建了一棵DOM树,这棵树就是有一系列Node节点所构成的.他为我们定义了文档的结构. Node类型: Node.ELEMENT_NODE(1); ...

  6. NSIS常用代码整理

    原文 NSIS常用代码整理 这是一些常用的NSIS代码,少轻狂特意整理出来,方便大家随时查看使用.不定期更新哦~~~ 1 ;获取操作系统盘符 2 ReadEnvStr $R0 SYSTEMDRIVE ...

  7. javascript中字符串常用操作整理

    javascript中字符串常用操作整理 字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用 ...

  8. Win7常用快捷键整理

    Win7常用快捷键整理.. -------------------- Win + Pause:显示系统属性对话框 ------------------------------------ Win7系统 ...

  9. python 常用库整理

    python 常用库整理 GUI 图形界面 Tkinter: Tkinter wxPython:wxPython pyGTK:PyGTK pyQt:pyQt WEB框架 django:django w ...

随机推荐

  1. 使用dbms_stats.gather_table_stats调整表的统计信息

    创建实验表,插入10万行数据 SQL> create table test (id number,name varchar2(10)); Table created. SQL> decla ...

  2. zkui部署

    1.拉取代码 #git clone https://github.com/DeemOpen/zkui.git 2.构建并安装程序 #cd zkui/ #yum install -y maven #mv ...

  3. C++的逐过程和逐语句的区别

    1.逐语句是指在遇到函数调用语句的时候进入到函数内部执行. 2.逐过程是指在遇到函数调用语句时把函数当作一条语句执行.

  4. POJ3728 THE MERCHANT LCA RMQ DP

    题意简述:给定一个N个节点的树,1<=N<=50000 每个节点都有一个权值,代表商品在这个节点的价格.商人从某个节点a移动到节点b,且只能购买并出售一次商品,问最多可以产生多大的利润. ...

  5. BZOJ_3489_ A simple rmq problem_KDTree

    BZOJ_3489_ A simple rmq problem_KDTree Description 因为是OJ上的题,就简单点好了.给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这 ...

  6. 截图工具,更改系统默认快捷键,系统配置实用程序,以管理员身份运行cmd（win7）

    截图工具: 开始--附件--右键发送到桌面快捷方式---桌面截图工具右键属性--快捷方式 更改系统默认快捷键: 控制面板--外观和个性化--调整屏幕分辨率--高级设置---英特尔图形和媒体控制面板-- ...

  7. 为Xen虚拟机扩容根文件系统(LVM)

    ===== 为Xen虚拟机扩容根文件系统(LVM) ===== 1. 增加1个4G的映像文件 # dd if=/dev/zero of=data.img bs=4k seek=1024k count= ...

  8. PBE加密算法

    这是我参加全国信息安全大赛的设计的加密系统中的一个加密算法,虽然比赛的结果不是非常理想但是,我还是学到了很多东西,现在和大家分享一下,比赛收获的东西. 基于口令加密 PBE(Password Base ...

  9. 2 pyspark学习----基本操作

    1 spark的python环境部署可以参照上面一篇哟.http://www.cnblogs.com/lanjianhappy/p/8705974.html 2 pyspark的基本操作. # cod ...

  10. TypeScript完全解读(26课时)_8.ES6精讲-ES6中的类(进阶)

    8.TypeScript完全解读-ES6精讲-类(进阶) 在index.ts内引入 Food创建的实例赋值给Vegetabled这个原型对象,这样使用Vegetables创建实例的时候,就能继承到Fo ...