找回密码
 立即注册

QQ登录

只需一步,快速开始

微信公众号开发资源

关注:839

所属分类: 微信开发 微信公众号开发资源

本版块为微信公众号开发教程与公众号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)

[html5开发博客] canvas - 画布

[复制链接]
查看: 1743|回复: 8
最佳答案
0 

102

主题

112

帖子

4090

积分

S1

积分
4090
 楼主| 发表于 2016-3-3 21:34:09 | 显示全部楼层 |阅读模式
1.绘制图形
   * 创建路径
     1.绘制矩形
       * 开始标识方法 - beginPath()
         * 开始要创建路径 - 没有具体作用
       * 设置矩形 - rect(x,y,width,height)
       * 结束标识方法 - closePath()
         * 可有可无,不影响最终的效果
       * 绘制方法
         * fill() - 填充
                   * stroke() - 描边
     2.绘制圆形
       * 开始标识方法 - beginPath()
         * 开始要创建路径 - 没有具体作用
       * 设置圆形 - arc(x,y,radius,startAngle,endAngle,direction)
         * xy - 圆形的圆心坐标值
                    * radius - 圆形的半径
                   * startAngle - 0
                   * endAngle - Math.PI*2
                   * direction - 表示是逆时针还是顺时针
                 * 可选项,Boolean
         * 结束标识方法 - closePath()
            * 可有可无,不影响最终的效果
         * 绘制方法
         * fill() - 填充
                   * stroke() - 描边
     3.绘制弧形
       * 开始标识方法 - beginPath()
         * 开始要创建路径 - 没有具体作用
       * 设置圆形
         arc(x,y,radius,startAngle,endAngle,direction)
             * xy - 圆形的圆心坐标值
                   * radius - 圆形的半径
                    * startAngle - 值范围为 0-Math.PI*2
                    * endAngle - 值范围为 0-Math.PI*2
                   * direction - 表示是逆时针还是顺时针
                     * 可选项,Boolean
                     * false - 默认值,表示顺时针
                     * true - 逆时针
         * 结束标识方法 - closePath() - 只有在stroke()方法有效
              * 如果不调用该方法 - 开放式(没有闭合)
                     * 如果调用了该方法 - 自动闭合
           * 绘制方法
             * fill() - 填充
                     * stroke() - 描边

例如:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>创建路径</title>
  6. </head>
  7. <body>
  8.   <canvas id="canvas" width="500px" height="500px"></canvas>
  9.   <script>
  10. var canvas = document.getElementById("canvas");
  11. var context = canvas.getContext("2d");
  12. // 绘制实心矩形
  13. context.beginPath();// 开始创建路径
  14. context.rect(10,10,100,100);// 设置矩形
  15. //context.closePath();
  16. context.fill();// 调用绘制方法
  17. // 绘制空心矩形
  18. context.beginPath();// 开始创建路径
  19. context.rect(10,120,100,100);// 设置矩形
  20. context.stroke();// 调用绘制方法
  21. // 绘制实心圆形
  22. context.beginPath();// 开始创建路径
  23. context.arc(170,60,50,0,Math.PI*2);// 设置圆形
  24. context.fill();// 调用绘制方法
  25. // 绘制空心圆形
  26. context.beginPath();
  27. context.arc(170,170,50,0,Math.PI*2);
  28. context.stroke();
  29. // 绘制实心弧形
  30. context.beginPath();
  31. context.arc(280,60,50,0,Math.PI);
  32. context.fill();

  33. context.beginPath();
  34. context.arc(280,170,50,0,Math.PI,true);
  35. context.fill();
  36. // 绘制空心弧形
  37. context.beginPath();
  38. context.arc(390,60,50,Math.PI/2,Math.PI*3/2);
  39. context.stroke();

  40. context.beginPath();
  41. context.arc(390,170,50,Math.PI/2,Math.PI*3/2,true);
  42. context.stroke();

  43. context.beginPath();
  44. context.arc(390,280,50,Math.PI/2,Math.PI*3/2);
  45. context.closePath();
  46. context.stroke();

  47. context.beginPath();
  48. context.arc(390,390,50,Math.PI/2,Math.PI*3/2,true);
  49. context.closePath();
  50. context.stroke();
  51.   </script>
  52. </body>
  53. </html>
复制代码
效果:
图片1.png

利用绘制圆形制作小球下落的小案例:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>创建路径绘制多个小球移动</title>
  6. </head>
  7. <body>
  8.   <canvas id="canvas" width="1000px" height="600px" style="background:pink;"></canvas>
  9.   <script>
  10. var canvas = document.getElementById("canvas");
  11. var context = canvas.getContext("2d");
  12. /*
  13.    解析思路:
  14.    * 将每个小球当做是一个对象
  15.      * 画布中绘制多个小球,需要使用数组进行存储
  16.    * 小球这个对象
  17.      * 属性
  18.    * 圆形坐标值
  19.    * 半径
  20. * 方法
  21.    * 绘制方法
  22.    * 移动方法
  23. 对象的创建方式:
  24. * 直接量方式
  25.    var obj = {
  26. 属性名 : 属性值,
  27. 方法名 : function(){}
  28.    }
  29. * new Object()
  30.    var obj = new Object();
  31.    obj.属性名 = 属性值;
  32.    obj.方法名 = function(){}
  33. * 构造器
  34.    function 构造器(){
  35.       this.属性名 = 属性值;
  36.   this.方法名 = function(){}
  37.    }
  38.    var 对象名 = new 构造器();
  39. */
  40. function Qiu(){
  41. // 属性
  42. this.r = 20;// 小球的半径
  43. this.xx=Math.random();
  44.     this.x=this.xx<=0.02?this.r:
  45.       this.xx<=0.98?parseInt(this.xx*canvas.width):
  46. parseInt(this.xx*canvas.width)-this.r  ;  // 小球的圆心坐标值x
  47.        this.y = -this.r;// 小球的圆心坐标值y
  48. // 方法
  49. this.paint = function(){//绘制
  50. context.beginPath();
  51. context.fillStyle=
  52. "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";
  53. context.arc(this.x,this.y,this.r,0,Math.PI*2);
  54. context.fill();
  55. }
  56. this.step = function(){//移动
  57. this.y++;
  58. }
  59. }
  60. // 定义存储小球的数组
  61. var arr = [];
  62. // 定义函数 - 创建小球,添加到数组里
  63. function createQiu(){
  64. var qiu = new Qiu();
  65. arr.push(qiu);
  66. }
  67. // 定义函数 - 将所有创建的小球,绘制|移动
  68. function paintQiu(){
  69. for(var i=0;i<arr.length;i++){
  70. arr[i].paint();
  71. arr[i].step();
  72. }
  73. }
  74. var time = 0;
  75. setInterval(function(){
  76. // 清除画布
  77. context.clearRect(0,0,canvas.width,canvas.height);
  78. // 创建小球
  79. time++;
  80. if(time%10==0){
  81. createQiu();
  82. }
  83. // 绘制+移动小球
  84. paintQiu();
  85. },100);
  86.   </script>
  87. </body>
  88. </html>
复制代码

效果:
图片2.png

关注我的同学(只显示前32名)
回复

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-2 04:44:22 | 显示全部楼层
这个必须得看看了 谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 21:30:59 | 显示全部楼层
支持兄弟! 好东西
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 22:04:23 | 显示全部楼层
过来看看!孙便听一下!都不容易!支持
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 22:06:54 | 显示全部楼层
感谢楼主,下载学习了!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 22:11:25 | 显示全部楼层
这个必须得看看了 谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-8 00:05:11 | 显示全部楼层
这个要学习一下
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-10 01:44:38 | 显示全部楼层
真的是好东西。哇哈哈
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

126

帖子

8203

积分

S1

积分
8203
发表于 2018-5-13 20:43:06 | 显示全部楼层
好人一个啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
zhongcong@henkuai.com

市场合作
zhongcong@henkuai.com