惯例,先贴代码:

 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. MySql数据库的主从配置

    主服务器 192.168.7.182 Centos6.5 MYSQL5.6.10 从服务器 192.168.112.7 Centos6.5 MYSQL5.6.10 主服务器配置(192.168.7.1 ...

  2. MySQL锁机制和PHP锁机制

    模拟准备--如何模拟高并发访问一个脚本:apache安装文件的bin/ab.exe可以模拟并发量 -c 模拟多少并发量 -n 一共请求多少次 http://请求的脚本例如:cmd: apache安装路 ...

  3. 在移动端做查看日志信息的js

    Vconsole.js下载这个js引入需要使用的html文件,当运行到页面是就会在右下角显示提示,点击就出出现像pc端上的控制台页面 在线查看的网址 http://console.hongliang. ...

  4. How to use QToolBar and QToolButton in Qt

    http://developer.nokia.com/Community/Wiki/How_to_use_QToolBar_and_QToolButton_in_Qt How to use QTool ...

  5. 3Sum,4Sum问题

    //三数和为0的问题.要求去重,并且输出数字有序.public List<List<Integer>> threeSum(int[] nums) { Arrays.sort(n ...

  6. UOJ222 【NOI2016】区间

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  7. AppStore审核2.1被拒大礼包过审经历

    本团队的iOS端迭代至今,经历过AppStore审核的数次调整,包括审核时长.严厉程度等,尝过各种花式的拒绝理由,但从没有像2018年初这次来得猛烈和漫长.从首次提交到最后过审几乎花费一个月的时间,下 ...

  8. 编写TreeSet类的实现程序,其中相关的迭代器使用二叉查找树

    package com.test.tree; import java.util.Iterator; /** * 编写TreeSet类的实现程序,其中相关的迭代器使用二叉查找树. * 在每个节点上添加一 ...

  9. 5.3 Razor语法基础

    以往开发ASP.NET Web Form时,在ASPX页面上都会出现许多夹杂C#/VB.NET与HTML的情况,而先前使用<%...%>这种传统圆角括号的表示法会让HTML标签与ASP.N ...

  10. hzau 1206 MathematicalGame

    1206: MathematicalGame Time Limit: 2 Sec  Memory Limit: 1280 MBSubmit: 124  Solved: 15[Submit][Statu ...