html5--5-8 绘制圆/弧

学习要点

  • 掌握绘制圆弧的方法


矩形的绘制方法

    1. rect(x,y,w,h)创建一个矩形
    2. strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
    3. fillRect(x,y,w,h) 绘制"被填充"的矩形
    4. stroke() 绘制已定义的路径
    5. fill()绘制一个实心的（带填充的图形）

Canvas的路径方法

    1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
    2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
    3. stroke() 绘制已定义的路径
    4. fill()绘制一个实心的（带填充的图形）
    5. beginPath() 用来创建新的路径
    6. closePath() 从当前点回到起始点的来封闭路径
    7. arc(x,y,r,开始角度，结束角度，true/false) ：创建圆弧/曲线（用于创建圆形或部分圆）

绘制直线段流程:

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      1. 指定线宽:lineWidth= 数值
      2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
    5. 设定起点：moveTo(x坐标,y坐标)
    6. 设定终点：lineTo(x坐标,y坐标)
    7. 开始绘制：stroke()

绘制矩形流程：

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      • 绘制空心矩形
        1. 指定线宽:lineWidth= 数值
        2. 指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        3. 设定矩形的基本参数：strokeRect(x,y;width,height)
      • 绘制填充矩形
        1. 指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        2. 设定矩形的基本参数：fillRect(x,y;width,height)

绘制圆

  1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
  2. 在canvas元素中添加提示语句
  3. 添加script元素
  4. 获取画布/设置绘图绘图环境
  5. 指定线宽:lineWidth= 数值
  6. 指定颜色：fill/strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
  7. 设定圆的基本参数：
    • 圆心的坐标:x,y
    • 圆的半径：数值
    • 起始弧度和终止弧度：角度值1，角度值2
    • 绘制方向：true（逆时针）/false（顺时针）
  8. 开始绘制：stroke()/fill（）

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <body>

 </body>

 </html><!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         canvas{background: #A9A9A0}

     </style>

 </head>

 <body>

     <canvas id="mycanvas" width="500px" height="300">

         您的浏览器暂不支持HTML5的canvas元素！！

     </canvas>

     <script type="text/javascript">

         //定义变量获取画布DOM

         var canvas=document.getElementById("mycanvas");

         //设置绘画环境为2d

         var context=canvas.getContext("2d");

         context.lineWidth=10;

         context.strokeStyle="#00FFFF";

         context.fillStyle="#F000F0";

         context.arc(100,50,30,0,Math.PI*2);

         context.stroke();

         context.beginPath();

         context.arc(200,50,30,0,Math.PI*2);

         context.fill();

         context.beginPath();

         context.arc(200,150,30,0,Math.PI*2);

         context.fill();

         context.beginPath();

         context.arc(200,150,30,0,Math.PI*2);

         context.stroke();

         context.beginPath();

         context.arc(300,50,30,0,Math.PI/3);

         context.fill();

         context.beginPath();

         context.arc(400,50,30,0,Math.PI/3,true);

         context.fill();

         context.beginPath();

         context.arc(300,150,30,0,Math.PI/3);

         context.stroke();

         context.beginPath();

         context.arc(400,150,30,0,Math.PI/3,true);

         context.stroke();

         context.beginPath();

         context.lineWidth=2;

         context.arc(100,250,30,0,Math.PI/3,true);

         context.closePath();

         context.stroke();

     </script>

 </body>

 </html>

html5--5-8 绘制圆/弧的更多相关文章

  1. html5--5-7 绘制圆/弧

    html5--5-7 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...

  2. html5--5-6 绘制圆/弧

    html5--5-6 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...

  3. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  4. 绘制相切弧arcTo

    绘制相切弧 语法: CanvasRenderingContext2D.arcTo( x1, y1, x2, y2, radius ) 描述: 该方法用于绘制圆弧 绘制的规则是当前位置与第一个参考点连线 ...

  5. C# Graphic 绘制圆、三角形、椭圆、图片

    在form和panel上可以绘制图形,线段,圆,文字,图形等等. 绘制代码必须放在OnPaint()函数里面,因为窗体刷新的时候,都会调用该函数,重新刷新所绘的图. 示例代码在Panel上绘制图形来简 ...

  6. HTML5 WebAudioAPI(四)--绘制频谱图2

    绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...

  7. leaflet 如何绘制圆

    方法1(根据指定的半径和中心点去绘制圆) var polygon1 = new L.Circle([34, 108], 120000, { color: 'red', //颜色 fillColor: ...

  8. canvas二：绘制圆和其他曲线

    1.绘制圆 绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯 绘制圆需要用到arc这个方法: arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向): 弧 ...

  9. HTML5 Canvas中绘制椭圆的几种方法

    1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...

随机推荐

  1. JVM类加载机制————2

    类加载机制的第一个阶段加载做的工作有: 1.通过一个类的全限定名(包名与类名)来获取定义此类的二进制字节流(Class文件).而获取的方式,可以通过jar包.war包.网络中获取.JSP文件生成等方式 ...

  2. 用JSONObject解析和处理json数据

    (一)jar包下载 所需jar包打包下载百度网盘地址:https://pan.baidu.com/s/1c27Uyre (二)常见场景及处理方法 1.解析简单的json字符串: 1 // 简单的jso ...

  3. 细说Redis持久化机制

    概述 Redis不仅能够作为缓存来使用,也能够作为内存数据库. Redis作为内存数据库使用时.必需要解决一个问题:数据的持久性.有些将Redis作为缓存使用的场景也需要将缓存的数据持久化到存储介质上 ...

  4. C++精华笔记

    牛客微信推送的C++笔记:2016-12-12   14:23:26 1.C++不仅支持面向对象,也可以像C一样支持面向过程. 2.OOP三大特性:封装 继承 多态 3.函数重载依据:函数类型and形 ...

  5. linux中ERROR: The partition with /var/lib/mysql is too full!解决的方法

    今天在ubuntu上遇见这个问题.应该是我的第一分区太小了. 解决的方法: bey0nd@wzw:/var$ cd /var bey0nd@wzw:/var$ rm -rf log 我们删除日志文件 ...

  6. OpenGL之路（七）为立方体加入丰富色彩

    在立方体的六个面贴上不同的颜色,假设想达到混合颜色的效果,能够參照立方体的前面代码在每一行前都加上颜色 代码例如以下 #include <gl/glut.h> #pragma commen ...

  7. Android加壳native实现

    本例仅在Android2.3模拟器跑通过,假设要适配其它机型.请自行研究,这里不过抛砖引玉. 0x00 在Android中的Apk的加固(加壳)原理解析和实现,一文中脱壳代码都写在了java层非常ea ...

  8. eclipse中怎么删除重复的console

    eclipse中不同的应用会开启不同的console,所以并不是重复. 如图: Terminate标志/操作按钮,可以停止当前的执行,以及标志此Console是Terminated状态: Remove ...

  9. MapReduce源代码分析之LocatedFileStatusFetcher

    LocatedFileStatusFetcher是MapReduce中一个针对给定输入路径数组,使用配置的线程数目来获取数据块位置的有用类. 它的主要作用就是利用多线程技术.每一个线程相应一个任务.每 ...

  10. ORACLE函数之单行转换函数

     1           ASCIISTR 格式:ASCIISTR(C) 说明:将字符串C转换为ASCII字符串,即将C中的ASCII字符保留不变,但非ASCII字符则以ASCII表示返回 举例: ...