路径方法
fill() 填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo(cpx,cpy,x,y) 创建二次贝塞尔曲线
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
开始点：moveTo(20,20)
控制点：quadraticCurveTo(20,100,200,20)
结束点：quadraticCurveTo(20,100,200,20)
cpx 贝塞尔控制点的 x 坐标
cpy 贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 创建三次方贝塞尔曲线
bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
结束点：bezierCurveTo(20,100,200,100,200,20)
cp1x 第一个贝塞尔控制点的 x 坐标
cp1y 第一个贝塞尔控制点的 y 坐标
cp2x 第二个贝塞尔控制点的 x 坐标
cp2y 第二个贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
arc(x,y,r,sAngle,eAngle,counterclockwise) 创建弧/曲线(用于创建圆形或部分圆)
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
arcTo(x1,y1,x2,y2,r) 创建两切线之间的弧/曲线
x1 弧的起点的 x 坐标
y1 弧的起点的 y 坐标
x2 弧的终点的 x 坐标
y2 弧的终点的 y 坐标
r 弧的半径
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false
var a=document.getElementById("d");
var ctx=a.getContext("2d");
ctx.beginPath(); //起始一条路径，或重置当前路径
ctx.moveTo(20,20); //把路径移动到画布中的指定点，不创建线条
ctx.lineTo(20,120); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
ctx.lineTo(90,120);
ctx.closePath(); //创建从当前点回到起始点的路径
ctx.stroke(); //绘制已定义的路径
ctx.fillStyle="green";
ctx.fill(); //填充当前绘图(路径)
ctx.beginPath();
ctx.moveTo(20,150);
ctx.quadraticCurveTo(20,250,200,150); //创建二次贝塞尔曲线
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,350)
ctx.bezierCurveTo(20,400,200,400,200,350); //创建三次方贝塞尔曲线
ctx.stroke();
ctx.beginPath();
ctx.arc(300,200,20,0,1.5*Math.PI); //创建弧/曲线(用于创建圆形或部分圆)
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300,280);
ctx.lineTo(350,280);
ctx.arcTo(400,280,400,330,50); //创建两切线之间的弧/曲线
ctx.lineTo(400,380);
ctx.stroke();
ctx.rect(400,20,50,50);
if(ctx.isPointInPath(401,20)){ //如果指定的点位于当前路径中，则返回 true，否则返回 false
ctx.stroke();
}
ctx.rect(150,20,200,120);
ctx.stroke();
ctx.clip(); //从原始画布剪切任意形状和尺寸的区域
ctx.fillStyle="green";
ctx.fillRect(0,0,250,100);
HTML5 Canvas中实现绘制一个像素宽的细线
正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
HTML5 canvas绘图基本使用方法
是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...
HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
c#中获取路径方法
要在c#中获取路径有好多方法,一般常用的有以下五种: //获取应用程序的当前工作目录. String path1 = System.IO.Directory.GetCurrentDirectory() ...
HTML5 Canvas中绘制椭圆的几种方法
1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...
HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
html5 canvas中CanvasGradient对象用法
html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变 CanvasGradient对象可以实现两种不同形式的 ...
用HTML5 CANVAS做自定义路径的动态效果图片！
最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片 我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈 下面是网址: http://www.vic ...
HTML5 canvas 中的线条样式
线条样式属性 lineCap 设置或返回线条的结束端点样式 butt 默认.向线条的每个末端添加平直的边缘. round 向线条的每个末端添加圆形线帽. ...
随机推荐
hdu5269 Chip Factory
地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=5536 题目: Chip Factory Time Limit: 18000/9000 MS ( ...
Android获取屏幕宽和高
android获取屏幕的高度和宽度用到WindowManager这个类,两种方法: 1.WindowManager wm = (WindowManager) getContext() ...
《TCP/IP详解卷1：协议》第3章 IP：网际协议(2)-读书笔记
章节回顾: 第1章 概述-读书笔记 第2章 链路层-读书笔记 第3章 IP ...
Html辅助方法(分页、下拉框)
引用命名空间: using System.Text; using System.Web.Mvc; Html分页方法 #region 分页Html辅助方法 /// /// ...
kettle中Get Data from XML , Jason Input , 文本文件输入 使用示例
1.Get Data from XML xml文件内容:
菜||焦溜丸子||2013-03-28/image/0/00 ...sersync+rsync同步
(一)目标服务器(rsync):10.60.50.192 1.安装rsync yum -y install rsync 2.创建rsyncd.conf配置文件 vi /etc/rsyncd.conf ...
java和c#通过esb服务互调用组件
场景:java和c#写的服务.站点,互相任意调用.实现一切即服务. 解决方案:使用这种轻量级的esb架构,通过tcp通信解决通信传输问题,总线服务解决服务地址问题,契约解决数据交互问题.由于组件封装了 ...
创建多线程Thread
创建一个线程: # 方式一from threading import Thread import time def func(n): time.sleep(1) print(n) t = Thread ...
Linux - 操作系统
操作系统(科普章节) 目标 了解操作系统及作用 1. 操作系统(Operation System,OS) 操作系统作为接口的示意图 没有安装操作系统的计算机,通常被称为 裸机 如果想在 裸机 上运行自 ...
Python中__repr__和__str__区别(转)
class Test(object): def __init__(self, value='hello, world!'): self.data = value >>> t = Te ...
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
