想要绘制其他图形，需要使用路径，使用路径包含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. 黑科技--位集--bitset

    自从上次网赛发现这么个东西之后,深深地感受到了bitset的强大,0.0. 正常的bool占用1字节空间,bitset可以把这个缩到1bit,空间上8倍优化.正常用起来可能会跟位运算状态压缩类似,但是 ...

  2. iOS10适配——相机，通讯录，麦克风等权限设置

    崩溃:[access] This app has crashed because it attempted to access privacy-sensitive data without a usa ...

  3. Delphi中unicode转汉字函数(转)

    源:Delphi中unicode转汉字函数 近期用到这个函数,无奈没有找到 delphi 自带的,网上找了下 有类似的,没有现成的,我需要的是 支持 “\u4f00 ” 这种格式的,即前面带标准的 “ ...

  4. 五、pig学习

    一.什么是pig 1.pig和sql.map-reduce的关系 来自为知笔记(Wiz)

  5. 手机端 H5上传头像

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

  6. 自适应网页设计/响应式Web设计

    zccst转 很早就有人设想,能不能”一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)? 一.”自适应网页设计”的概念 2010年,Ethan Ma ...

  7. Go的pprof使用

    go中有pprof包来做代码的性能监控,在两个地方有包: net/http/pprof runtime/pprof 其实net/http/pprof中只是使用runtime/pprof包来进行封装了一 ...

  8. iOS9网络适配

    今天升级Xcode7.0,发现网络访问失败. 输出错误信息:The resource could not be loaded because the App Transport Security po ...

  9. double和real型有什么区别 [

    DOUBLE是双精度浮点数REAL  是实数类型,他包括 DOUBLE,SINGLE等类型

  10. 安卓 handler解析

    参考: 1.http://www.2cto.com/kf/201302/190591.html(安卓更新UI的两种方式,handler,Activity.runOnUIThread()) 2.http ...