1. <script>
  2. var context = document.getElementById('canvas').getContext('2d');
  3. context.font = '48pt Helvetica';
  4. context.strokeStyle = 'blue';//边框颜色
  5. context.fillStyle = 'red';//填充颜色
  6. context.lineWidth = '2';
  7.  
  8. //画文字
  9. context.strokeText('边框', 60, 110);
  10. context.fillText('填充', 440, 110);
  11.  
  12. context.strokeText('边框和填充', 650, 110);
  13. context.fillText('边框和填充', 650, 110);
  14. //画矩形
  15. context.lineWidth = '5';
  16. context.beginPath();//边框 矩形
  17. context.rect(80, 150, 150, 100);
  18. context.stroke();
  19.  
  20. context.beginPath();//填充 矩形
  21. context.rect(400, 150, 150, 100);
  22. context.fill();
  23.  
  24. context.beginPath();//边框和填充
  25. context.rect(750, 150, 150, 100);
  26. context.stroke();
  27. context.fill();
  28.  
  29. //画弧度
  30. context.beginPath();
  31. context.arc(150, 370, 60, 0, 1.5 * Math.PI);
  32. context.stroke();
  33.  
  34. context.beginPath();
  35. context.arc(475, 370, 60, 0, Math.PI * 3 / 2);
  36. context.fill();
  37.  
  38. context.beginPath();
  39. context.arc(820, 370, 60, 0, Math.PI * 3 / 2);
  40. context.stroke();
  41. context.fill();
  42. //closePath()方法创建当前点到起始点的路径
  43. context.beginPath();
  44. context.arc(150, 550, 60, 0, Math.PI * 3 / 2);
  45. context.closePath();
  46. context.stroke();
  47.  
  48. context.beginPath();
  49. context.arc(475, 550, 60, 0, Math.PI * 3 / 2);
  50. context.closePath();
  51. context.fill();
  52.  
  53. context.beginPath();
  54. context.arc(820, 550, 60, 0, Math.PI * 3 / 2);
  55. context.closePath();
  56. context.stroke();
  57. context.fill();
  58. //绘制三角形
  59. context.beginPath();
  60. context.moveTo(120, 650);
  61. context.lineTo(120, 750);
  62. context.lineTo(180, 750);
  63. context.closePath();
  64. context.stroke();
  65.  
  66. context.beginPath();
  67. context.moveTo(450, 650);
  68. context.lineTo(450, 750);
  69. context.lineTo(510, 750);
  70. context.closePath();
  71. context.fill();
  72.  
  73. context.beginPath();
  74. context.moveTo(810, 650);
  75. context.lineTo(810, 750);
  76. context.lineTo(870, 750);
  77. context.closePath();
  78. context.fill();
  79. context.stroke();
  80.  
  81. context.beginPath();
  82. context.moveTo(120, 800);
  83. context.lineTo(120, 900);
  84. context.lineTo(180, 900);
  85. context.stroke();
  86.  
  87. context.beginPath();
  88. context.moveTo(450, 800);
  89. context.lineTo(450, 900);
  90. context.lineTo(510, 900);
  91. context.fill();
  92.  
  93. context.beginPath();
  94. context.moveTo(810, 800);
  95. context.lineTo(810, 900);
  96. context.lineTo(870, 900);
  97. context.fill();
  98. context.stroke();
  99. </script>

练习代码

Canvas路径、描边、填充的更多相关文章

  1. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  2. 理解canvas路径

    canvas路径和ps里面的路径差不多,在进行图形绘制时,先绘制出来图形的路径,然后再描边或者填充. canvas路径还有子路径的概念,在某一时刻,canvas之中只能有一条路径存在,Canvas规范 ...

  3. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  4. Canvas路径方向

    使用Canvas路径画图需要注意方向,画图方向是顺时针还是逆时针需要记住.下面让我们看看Canvas常见路径方向. arc 参数值 context.arc(x,y,r,sAngle,eAngle,co ...

  5. html5 canvas用图案填充形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. canvas放射性渐变填充

    今天在学习canvas时,遇到canvas的fillstyle有一个createRadialGradient()方法,创建放射性渐变. 上代码: <!DOCTYPE html> <h ...

  7. html5 canvas 弧形描边渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. html5 canvas 多个填充渐变形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. canvas路径绘制

    惯例,先贴代码: 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = ...

随机推荐

  1. OS X 键盘快捷键

    了解有关常见 OS X 键盘快捷键的信息.键盘快捷键是通过按下键盘上的组合键来调用 OS X 功能的一种方式. 若要使用键盘快捷键或按键组合,您可以同时按修饰键和字符键.例如,同时按下 Command ...

  2. InputStream和OutputStream

    1.在java中stream代表一种数据流(源),javaio的底层数据元,---(想像成水龙头) 2.任何有能力产生数据流(源)的javaio对象就可以看作是一个InputStream对象既然它能产 ...

  3. Linux学习笔记3-VI 和 VIM的使用

    vi: Visual Interface vim: VI iMproved 全屏编辑器, Linux系统下最强大的两款编辑器,vi和vim,vi是Linux本身自带的一款编辑器,纯文本编辑不带任何效果 ...

  4. AndroidUI 视图动画-混合动画效果 (AnimationSet)/动画效果监听

    在前面介绍了几种动画效果:透明动画效果(AlphsAnimation).移动动画效果(TranslateAnimation).旋转动画效果(RotateAnimation).缩放动画效果(ScaleA ...

  5. Little Zu Chongzhi's Triangles

    Little Zu Chongzhi's Triangles Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/512000 ...

  6. Exception Handling in ASP.NET Web API

    public static void RegisterGlobalFilters(GlobalFilterCollection filters) { filters.Add(new HandleErr ...

  7. 关于在用Swift开发iOS时如何隐藏NavigationBar和TabBar

    举个例子:如果我有一个页面需要进入时同时隐藏NavigationBar和TabBar,那么我就在那个页面的ViewController的代码里加上下面的代码.就可以实现了.接下来告诉大家每一块要注意的 ...

  8. 利用js_API 运行对html文档元素的属性的CRUD操作

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. C++关注备注部分知识点

    //关注备注部分知识点. #include <iostream> #include <string><span style="white-space:pre&q ...

  10. 在eclipse中怎么安装插件

    1.方法1是help中安装新软件,这个一般要你真到软件的url,如果不知道呢?那么就要用到marketpalce,这个一般也在help中的,