想要绘制其他图形，需要使用路径，使用路径包含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. 子序列和问题 acm

    题目描述 给定一个序列 {a1,a2,…,an},定义从a[l]到a[r]的连续子序列的和为sum[l,r],即sum[l,r]=sigma{ai},l<=i<=r.(1<=l< ...

  2. Spring--注入类型--setter

    setter注入: package com.bjsxt.service; import com.bjsxt.dao.UserDAO; import com.bjsxt.model.User; publ ...

  3. 入门经典——基础数据结构专题（List）

    UVA127 链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  4. bzoj-3450 Easy概率DP 【数学期望】

    Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连续a ...

  5. paper资料

    1.Ycbcr  RGB空间转换 :http://www.cnblogs.com/Imageshop/archive/2013/02/14/2911309.html 2.抠图:http://www.c ...

  6. Practice Round China New Grad Test 2014 报告

    今天有Google of Greater China Test for New Grads of 2014的练习赛,主要是为了过几天的校园招聘测试做练习用的,帮助熟悉平台,题目嘛,个人觉得除了A题外, ...

  7. iOS UITabBar

    参考文章:http://www.cnblogs.com/wendingding/p/3775488.html 简单明了,不用再总结了.

  8. db2 将原表列notnull属性修改为null属性的方法 （查看主键约束，唯一约束去syscat.tabconst）

    好久没机会写点东西了,今天把自己遇到的一个小问题跟大家分享一下如何修改db2数据库表中列的属性--将列的非空属性改为允许空的属性,修改数据表的某一列属性其实很简单但是里面有需要细节需要dba注意,毕竟 ...

  9. spark 中的RDD编程 -以下基于Java api

    1.RDD介绍:     RDD,弹性分布式数据集,即分布式的元素集合.在spark中,对所有数据的操作不外乎是创建RDD.转化已有的RDD以及调用RDD操作进行求值.在这一切的背后,Spark会自动 ...

  10. Jenkins搭建Windows slave 环境

      因为之前的接口测试平台是在windows上,后来换了linux,花了半天时间也没有成功,就想着建立一个windows的节点曲线救国   创建WindowsSlave 首先要保证windows和sl ...