惯例,先贴代码:

 1 /**
2 * Created by Administrator on 2016/1/27.
3 */
4 function draw (id){
5 var canvas = document.getElementById(id);
6 var context = canvas.getContext('2d');
7 context.beginPath();
8 context.moveTo(20,30);
9 context.lineTo(100,200);
10 context.rect(50,50,100,100);
11 context.arc(50,50,100,0,Math.PI*2,true);
12 context.closePath();
13 context.fillStyle = "FF6100";
14 context.strokeStyle = "0000FF";
15 context.lineWidth = 2;
16 context.fill();
17 context.stroke();
18 }

代码解释:此代码会生成一条直线,一个矩形,一个圆形。

这种路径绘制方式分为三步:

  1)创建绘图路径;   

     context.beginPath();
context.moveTo(20,30);
context.lineTo(100,200);
context.rect(50,50,100,100);
context.arc(50,50,100,0,Math.PI*2,true);
context.closePath();

  2)创建绘图样式;

      context.fillStyle = "FF6100";
context.strokeStyle = "0000FF";
context.lineWidth = 2;

  3)绘制图形。

     context.fill();
context.stroke();

自己总结:绘制直线时应注意moveTo()和lineTo()应结合着用,前者是起始坐标,后者是终止坐标。

     rect(x,y,width,heigth)和arc 不再赘述。

canvas路径绘制的更多相关文章

  1. html5 canvas路径绘制2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  3. Canvas:绘制路径

    Canvas:绘制路径 绘制路径 图形的基本元素是路径.路径是[通过不同颜色和宽度的线段或曲线相连形成的不同形状的]点的集合.一个路径,甚至一个子路径,都是闭合的. 使用路径绘制图形需要一些额外的步骤 ...

  4. canvas快速绘制圆形、三角形、矩形、多边形

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...

  5. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  6. Canvas上绘制几何图形

    重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...

  7. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  8. canvas纯绘制雨伞、飞机、五角星、桃心,无逻辑

    由于网上很多都是用很多算法和逻辑使用canvas进行绘制,但有时也无法解决一些小众需求 . 为了满足需求不能写运算纯手写,感觉真的很浪费时间,只有自己踩过的坑,才不想看到别人也被坑.我很懒,也想过弄个 ...

  9. HTML5 在canvas中绘制复杂形状

    作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,画图环 ...

随机推荐

  1. juniper常用命令(二)

    Juniper防火墙基本命令 常用查看命令 Get int查看接口配置信息 Get int ethx/x查看指定接口配置信息 Get mip查看映射ip关系 Get route查看路由表 Get po ...

  2. Struts2的<s:date>标签使用详解[转]

    作用:用来格式化显示日期的格式. 它可以用一种你指定的格式来显示 (如:“yyyy-MM-dd”),可以生成通俗易懂的注释(如:in 2 hours,14 minutes),或者用预先定义的一个格式来 ...

  3. java转义符的一些用法

    那么这里在列上一些转义字符 \\ 反斜杠 \t 间隔 ('\u0009')\n 换行 ('\u000A')\r 回车 ('\u000D')\d 数字 等价于 [0-9]\D 非数字 等价于 [^0-9 ...

  4. java深入探究14-lucene

    项目代码:链接:http://pan.baidu.com/s/1qXVcfCw 密码:apw1 01 回顾索引 定义:索引是对数据库表中一列或多列的值进行排序的一种结构 目的:加快对数据库表中记录的查 ...

  5. 关于tcp的知识记录

    1. 概念 TCP(Transmission Control Protocol,传输控制协议),是一种面向连接的,可靠地,基于字节流的传输层通信协议.当应用层向TCP层发送用于网络间传输的用8位字节表 ...

  6. Codeforces Round #200 (Div. 1) BCD

    为了锻炼个人能力奋力div1 为了不做原题从200开始 B 两个电线缠在一起了 能不能抓住两头一扯就给扯分开 很明显当len为odd的时候无解 当len为偶数的时候 可以任选一段长度为even的相同字 ...

  7. C#加密解密DES字符串<转>

    using System; using System.Collections.Generic; using System.Text; using System.Security.Cryptograph ...

  8. Java -- JDBC 数据库连接池

    1. 原理代码示例 public class JdbcPool implements DataSource { private static LinkedList<Connection> ...

  9. JavaScript文件下载 兼容所有浏览器 不可跨域

    前端文件下载 兼容所有浏览器 download.js文件下载,几乎支持所有类型下载,详细内容参考官网 http://danml.com/download.html 引入文件 <script sr ...

  10. Struts2学习(2)

    1.结果嗯配置 (1)全局结果页面 (2)局部结果页面 (3)result标签type属性 2.在action获取表单提交数据 (1)使用ActionContext类获取 (2)使用ServletAc ...