想要绘制其他图形，需要使用路径，使用路径包含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. UIView Methods

    UIView翻译 (参考) 2011年04月12日 星期二 10:09 转载于:http://blog.csdn.net/tracylife/archive/2010/08/27/5842723.as ...

  2. 从零开始HTML

      1.属性 HTML 标签可以拥有属性.属性提供了有关 HTML 元素的更多的信息.属性总是以名称/值对的形式出现,比如:name="value". 属性总是在 HTML 元素的 ...

  3. CodeForces 626B Cards

    瞎搞题...凭直觉+猜测写了一发,居然AC了.. #include<cstdio> #include<cstring> #include<cmath> #inclu ...

  4. js格式化时间戳

    //js格式化时间戳,转换为时间格式  2017-1-15 4:10:15 function getLocalTime(nS) { var time = new Date(parseInt(nS) * ...

  5. iOS开发——汉字转拼音

    以前有一次做一个天气预报的项目,有一个功能是输入城市名,请求该城市的天气,需要把汉字转化成拼音,比如深圳——>shenzhen,加入到参数中.当时在网上找了一下,网友给出的方法很多都用不了,现在 ...

  6. Delphi+GDI

    源:Delphi 初试GDI+学习笔记 Delphi 深入GDI+学习笔记

  7. mongodb学习(五) 查询

    1. 按条件查询: db.users.find({"name":"MM1"}) 2.find的第二个参数可以指定要返回的字段:这里1 表示要显示的字段,0 表示 ...

  8. mongodb学习(二)分级查询数组中的值

    (PS: 标题有点不妥当...) 大概是这样...数据结构如下: 需要模糊查询title的值... mongodb中操作语句: 主要是注意这里urlElements不需要加[0]...我开始的时候写成 ...

  9. EasyUI--datebox设置默认时间

    1. html代码: <input id="txtBeginTime" class="easyui-datebox" data-options=" ...

  10. IOS开发中UIFont字体设置

    我们在开发中很多时候要设置UIlabel,UIbutton,UItextfield的字体,这个时候我们就需要用到UIFont,下面简单介绍一下UIFont的用法,仅供参考. UIFont用于获取和设置 ...