canvas路径绘制
惯例,先贴代码:
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路径绘制的更多相关文章
- html5 canvas路径绘制2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径
绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...
- Canvas:绘制路径
Canvas:绘制路径 绘制路径 图形的基本元素是路径.路径是[通过不同颜色和宽度的线段或曲线相连形成的不同形状的]点的集合.一个路径,甚至一个子路径,都是闭合的. 使用路径绘制图形需要一些额外的步骤 ...
- canvas快速绘制圆形、三角形、矩形、多边形
想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- Canvas上绘制几何图形
重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...
- HTML5使用Canvas来绘制图形
一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...
- canvas纯绘制雨伞、飞机、五角星、桃心,无逻辑
由于网上很多都是用很多算法和逻辑使用canvas进行绘制,但有时也无法解决一些小众需求 . 为了满足需求不能写运算纯手写,感觉真的很浪费时间,只有自己踩过的坑,才不想看到别人也被坑.我很懒,也想过弄个 ...
- HTML5 在canvas中绘制复杂形状
作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,画图环 ...
随机推荐
- juniper常用命令(二)
Juniper防火墙基本命令 常用查看命令 Get int查看接口配置信息 Get int ethx/x查看指定接口配置信息 Get mip查看映射ip关系 Get route查看路由表 Get po ...
- Struts2的<s:date>标签使用详解[转]
作用:用来格式化显示日期的格式. 它可以用一种你指定的格式来显示 (如:“yyyy-MM-dd”),可以生成通俗易懂的注释(如:in 2 hours,14 minutes),或者用预先定义的一个格式来 ...
- java转义符的一些用法
那么这里在列上一些转义字符 \\ 反斜杠 \t 间隔 ('\u0009')\n 换行 ('\u000A')\r 回车 ('\u000D')\d 数字 等价于 [0-9]\D 非数字 等价于 [^0-9 ...
- java深入探究14-lucene
项目代码:链接:http://pan.baidu.com/s/1qXVcfCw 密码:apw1 01 回顾索引 定义:索引是对数据库表中一列或多列的值进行排序的一种结构 目的:加快对数据库表中记录的查 ...
- 关于tcp的知识记录
1. 概念 TCP(Transmission Control Protocol,传输控制协议),是一种面向连接的,可靠地,基于字节流的传输层通信协议.当应用层向TCP层发送用于网络间传输的用8位字节表 ...
- Codeforces Round #200 (Div. 1) BCD
为了锻炼个人能力奋力div1 为了不做原题从200开始 B 两个电线缠在一起了 能不能抓住两头一扯就给扯分开 很明显当len为odd的时候无解 当len为偶数的时候 可以任选一段长度为even的相同字 ...
- C#加密解密DES字符串<转>
using System; using System.Collections.Generic; using System.Text; using System.Security.Cryptograph ...
- Java -- JDBC 数据库连接池
1. 原理代码示例 public class JdbcPool implements DataSource { private static LinkedList<Connection> ...
- JavaScript文件下载 兼容所有浏览器 不可跨域
前端文件下载 兼容所有浏览器 download.js文件下载,几乎支持所有类型下载,详细内容参考官网 http://danml.com/download.html 引入文件 <script sr ...
- Struts2学习(2)
1.结果嗯配置 (1)全局结果页面 (2)局部结果页面 (3)result标签type属性 2.在action获取表单提交数据 (1)使用ActionContext类获取 (2)使用ServletAc ...