想要绘制其他图形，需要使用路径，使用路径包含4个步骤，开始创建路径、创建图形的路径、路径创建完成后关闭路径、设定绘制样式，之后就可以调用绘制方法绘制路径了。

1、绘制圆形

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById("canvas");
             if(canvas == null){
                 return false;
             }
             var context = canvas.getContext("2d");
             context.fillStyle="#eeeeef";
             context.fillRect(0,0,600,700);
             for(var i=0; i<=10;i++){
                 context.beginPath();
                 context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                 context.closePath();
                 context.fillStyle = "rgba(255,0,0,0.25)";
                 context.fill();
             }
         }
     </script>
 </head>
 <body  onload="draw('canvas')">
     <canvas id="canvas" width="600px" height="700px"></canvas>
 </body>
 </html>

2、moveTo与lineTo

moveTo:将光标移动到指定坐标点

lineTo:指定直线的终点

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script>
         function draw(id) {
             var canvas=document.getElementById(id);
             var context = canvas.getContext("2d");
             context.fillStyle = "#eeeeef";
             context.fillRect(0,0,300,400);
             var dx = 150;
             var dy = 150;
             var s = 100;
             context.beginPath();
             context.fillStyle = "rgb(100,255,100)";
             context.strokeStyle = "rgb(0,0,100)";
             var x = Math.sin(0);
             var y = Math.cos(0);
             var dig = Math.PI / 15 *11;
             for(var i=0; i<30;i++){
                 var x = Math.sin(i*dig);
                 var y = Math.cos(i*dig);
                 context.lineTo(dx+x*s, dy+y*s);
             }
             context.closePath();
             context.fill();
             context.stroke();
         }
     </script>
 </head>
 <body onload="draw('canvas')">
     <canvas id="canvas" width="300" height="400"></canvas>
 </body>
 </html>

3、使用bezierCurveTo绘制贝塞尔曲线

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             if(canvas==null){
                 return false;
             }
             var context = canvas.getContext("2d");
             context.fillStyle = "#eeeeef";
             context.fillRect(0,0,300,400);
             var dx = 150;
             var dy = 150;
             var s = 100;
             context.beginPath();
             context.fillStyle = "rgb(100,255,100)";
             var x = Math.sin(0);
             var y = Math.cos(0);
             var dig = Math.PI /15 *11;
             context.moveTo(dx,dy);
             for(var i=0;i<30;i++){
                 var x = Math.sin(i*dig);
                 var y = Math.cos(i*dig);
                 context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
             }
             context.closePath();
             context.fill();
             context.stroke();
         }
     </script>
 </head>
 <body onload="draw('canvas')">
     <!--bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)-->
     <!--cp1x,cp1y 第一个控制点的坐标-->
     <!--cp2x,cp2y,第二个控制点的坐标-->
     <!--x,y：相当于lineTo的x,y-->
     <canvas id="canvas" width="300px" height="400px"></canvas>
 </body>
 </html>

[html] 学习笔记-Canvas使用路径的更多相关文章

  1. V-rep学习笔记：机器人路径规划2

    路径规划问题是机器人学研究的一个重要领域,它是指给定操作环境以及起始和目标的位置姿态,要求选择一条从起始点到目标点的路径,使运动物体(移动机器人或机械臂)能安全.无碰撞地通过所有的障碍物而达到目标位置 ...

  2. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  3. HTML 学习笔记 (canvas 基础)

    1.什么是Canvas canvas就是一个画布,可以进行画任何的线,图形,填充等一系列操作.这一切都是用Js操作的,另外Canvas不仅仅提供简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一 ...

  4. Web前端学习笔记——Canvas

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

  5. winform学习笔记-文档路径

    获取应用程序路径 //获取当前进程的完整路径,包含文件名(进程名).string str = this.GetType().Assembly.Location;result: X:\xxx\xxx\x ...

  6. python学习笔记24（路径与文件 (os.path包, glob包)）

    os.path模块主要用于文件的属性获取,在编程中经常用到,以下是该模块的几种常用方法. >>> import os.path >>> path = '/home/ ...

  7. [Android学习笔记]Canvas的使用

    Canvas文档 http://developer.android.com/training/index.html 在绘制view时候,重写onDraw(canvas)方法,可能需要在canvas上绘 ...

  8. [html5] 学习笔记-Canvas应用

    通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...

  9. [html] 学习笔记-Canvas图形绘制处理

    使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...

随机推荐

  1. sqlserver存储过程中，set rowcount 0是什么意思？

    一般在语句中使用set rowcount是为了使后续的查询.更新.删除操作只影响指定的行数比如 一起执行如下语句 set rowcount 1SELECT * FROM sysobjects结果只返回 ...

  2. November 11th 2016 Week 46th Friday

    Keep in mind that neither success nor failure is ever final. 无论成败,皆非定局. The final is not coming, but ...

  3. 16、手把手教你Extjs5（十六）Grid金额字段单位MVVM方式的选择

    这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位 ...

  4. Redis的启动

    http://www.cnblogs.com/goodspeed/archive/2012/10/18/2729615.html http://blog.csdn.net/yulei_qq/artic ...

  5. Myeclipseforspring 10破解

    破解包和说明下载网址:http://ishare.iask.sina.com.cn/f/33848276.html?all=y

  6. 设置git账号并生成新的ssh（切换电脑用户之后）

    1.设置账号 2.设置邮箱 3.检查确认 4. 5.check-----成功~

  7. robotium从入门到放弃 四 Robotium常用API

      获取控件 getText() getEditText() getButton() getImage() getImageButton() getEditText() getView() getWe ...

  8. iOS 之 导航栏按钮

    UIButton *releaseButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [releaseButton setTitle ...

  9. Grunt构建工具插件篇——之less工具

    Grunt--Less 摘要: 之前介绍了自动构建工具Grunt,其中有一个模块是"grunt-contrib-less",下面是配置Grunt自动编译less文件. 安装: Gr ...

  10. redis php sort 函数

    很多人把redis当成一种数据库,其实是利用redis来构造数据库的模型,有那种数据库的味道.但是在怎么构建还是key和value的关系.根真正的关系型数据库还是不一样的.效率高,不方便:方便的,效率 ...