- 浏览: 415951 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
IThead:
纠结了几天,用了你的方法,现在解决了,谢谢!
Eclipse 写Javascript卡死问题 -
Rubicon__:
你好,我在运用PageWidget这个类时,出现第一页翻到第二 ...
android翻书效果实现原理( 贝塞尔曲线绘制原理/点坐标计算) -
lionios:
如果不显示printDialog,则打印出来的是空白页,请问你 ...
Print打印机例子 -
rayln:
weiqiulai 写道哥们儿,我怎么没有看到监控队列的配置和 ...
JMS监听MQ实例 -
weiqiulai:
哥们儿,我怎么没有看到监控队列的配置和代码?
JMS监听MQ实例
转载: http://www.cnblogs.com/amtf/archive/2012/01/12/2319680.html
只有对基础二维图形的绘画(drawing)、着色(coloring)、变换(transforming)有较强基础,才能更加有效的利用Canvas;
下面,我就简单了解一下,canvas是如何绘画基本shape的(矩形、直线、圆弧、贝赛尔曲线)等;
先贴一个以下所有涉及到的实现运行的基本代码段:
Base code
以下所有实例代码,只要把上面的function drawScreen()替换掉即可!
Basic Rectangle Shape(矩形)
在Canvas中,画矩形有三种方式:filling(), stroking(), or clearing
三种方式对应以下三种方法(参数都相同,分别是矩形的左上角的坐标[x,y]、矩形的宽度、矩形的高度):
fillRect(x,y,width,height):填充矩形区域;
strokeRect(x,y,width,height):画一个矩形边框;
clearRect(x,y,width,height):清除指定的矩形区域、使该区域变得透明;
Example
上一篇有提到Current state;
当我们在绘画时,我们可以利用所谓的绘画状态的堆栈,
对于canvas context在任何一个时间的数据的每一个状态都会存储;
下面是对于每一个状态,存储在堆栈中的一个数据列表;
变换矩阵(旋转、移动、缩放等);
剪切区域;
Canvas特征的当前值(部分):
— globalAlpha
— globalCompositeOperation
— strokeStyle
— textAlign, textBaseline
— lineCap, lineJoin, lineWidth, miterLimit
— fillStyle
— font
— shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY
在绘图环境中,正在操作的当前path and 当前位置并不是状态的一部分;Importmant!!!
如何保存恢复当前的状态呢?
context.save()---push to stack;
context.restore()---pop form stack;
先有一个简单的印象,之后会更加详细的剖析;
Create Lines(直线)
利用path来创建线(line)
Path:用来画出一系列的相连的圆弧或者线条,可以称之为“轨迹”,使用它可以画出任意复杂的形状;
一个Canvas Context仅有一个current path ;
在调用context.save()时,current path并不做为当前的状态(current state)存储于stack中;
利用.beginPath()功能方法来启动一个Path;
利用.closePath()功能方法来关闭一个Path;
Example:画一条10px宽度的水平直线
线的属性:lineCap
直线lineCap属性:线帽,也就是线两端的样式,只有绘制较宽的线的,它才有效;
有三个有效值:butt\round\square
"butt":默认值,指定了线段应该没有线帽。
"round":线段应该带有一个半圆形的线帽,半圆的直径等于线段的宽度,并且线段在端点之外扩展了线段宽度的一半。
"square":线段应该带有一个矩形线帽。这个值和 "butt" 一样,但是线段扩展了自己的宽度的一半。
Example
线的属性:lineJoin
lineJoin属性:表示两条线段如何连接;
当一个路径包含了线段或曲线相交的交点的时候,用lineJoin 属性来说明如何绘制这些交点;
该属性也有三个有效值:miter bevel round
"miter":默认值,两条线段的外边缘一直扩展到它们相交
"bevel":以一个斜边进行连接
"round":以一个圆弧边进行连接
Example
Arcs(圆弧)
一段圆弧可以是一个完整的圆也可以圆的一部分;
生成圆弧:context.arc()
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
参数依次代表圆心,半径、起始角度、终止角度、圆弧的方向; 角度都是以弧度来表示;
anticlockwise为布尔类型 ;true为顺时针、false为逆时针
Example
Bezier Curves(贝赛尔曲线)
Canvas支持二次 and 三次贝塞尔曲线的绘画
此处的贝塞尔曲线是定义在二维空间里的,需要一个起始点、一个终止点,再加上一个或者两个控制点来创建曲线;
控制点来决定所构造曲线的走向;
三次贝塞尔曲线需要两个点;
二次贝塞尔曲线需要一个点即可;
主要通过以下两个方法来绘画:
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)
二次贝塞尔曲线:
曲线的起始点为(0,0),结束点为(0,100)
点(500,25)控制最终生成曲线的走向;
三次贝塞尔曲线:
曲线的起点(0,0),结束点(150,300)
(0, 125), (300, 175)这两个为控制点;
大家可能自己运行一下代码,看看效果,此处就不贴图了。。
只有对基础二维图形的绘画(drawing)、着色(coloring)、变换(transforming)有较强基础,才能更加有效的利用Canvas;
下面,我就简单了解一下,canvas是如何绘画基本shape的(矩形、直线、圆弧、贝赛尔曲线)等;
先贴一个以下所有涉及到的实现运行的基本代码段:
Base code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); var Debugger = function() {}; Debugger.log = function(message) { try { console.log(message); } catch (exception) { return; } } function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function canvasApp() { //是否支持CANVAS判断 if(!canvasSupport()) { return; } //取Canvas var theCanvas = document.getElementById("canvasOne"); //获取绘图环境context var context = theCanvas.getContext("2d"); //绘图方法的实现 function drawScreen() {} //绘图方法调用执行 drawScreen(); } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff"> <canvas id="canvasOne" width="550" height="400"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>
以下所有实例代码,只要把上面的function drawScreen()替换掉即可!
Basic Rectangle Shape(矩形)
在Canvas中,画矩形有三种方式:filling(), stroking(), or clearing
三种方式对应以下三种方法(参数都相同,分别是矩形的左上角的坐标[x,y]、矩形的宽度、矩形的高度):
fillRect(x,y,width,height):填充矩形区域;
strokeRect(x,y,width,height):画一个矩形边框;
clearRect(x,y,width,height):清除指定的矩形区域、使该区域变得透明;
Example
function drawScreen() { context.fillStyle = '#000000';//填充颜色 context.strokeStyle = '#00ff00';//轮廓颜色 context.lineWidth = 2;//线宽 context.fillRect(10, 10, 40, 40);//填充矩形 context.strokeRect(7, 7, 46, 46);//画矩形轮廓 context.clearRect(20, 20, 20, 20);//清除矩形区域 }
上一篇有提到Current state;
当我们在绘画时,我们可以利用所谓的绘画状态的堆栈,
对于canvas context在任何一个时间的数据的每一个状态都会存储;
下面是对于每一个状态,存储在堆栈中的一个数据列表;
变换矩阵(旋转、移动、缩放等);
剪切区域;
Canvas特征的当前值(部分):
— globalAlpha
— globalCompositeOperation
— strokeStyle
— textAlign, textBaseline
— lineCap, lineJoin, lineWidth, miterLimit
— fillStyle
— font
— shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY
在绘图环境中,正在操作的当前path and 当前位置并不是状态的一部分;Importmant!!!
如何保存恢复当前的状态呢?
context.save()---push to stack;
context.restore()---pop form stack;
先有一个简单的印象,之后会更加详细的剖析;
Create Lines(直线)
利用path来创建线(line)
Path:用来画出一系列的相连的圆弧或者线条,可以称之为“轨迹”,使用它可以画出任意复杂的形状;
一个Canvas Context仅有一个current path ;
在调用context.save()时,current path并不做为当前的状态(current state)存储于stack中;
利用.beginPath()功能方法来启动一个Path;
利用.closePath()功能方法来关闭一个Path;
Example:画一条10px宽度的水平直线
function drawScreen() { context.strokeStyle = "#000000";//线的颜色 context.lineWidth = 10;//线的宽度 context.beginPath();//启动path context.moveTo(20, 20); context.lineTo(100, 20); context.stroke();//绘画 context.closePath();//关闭path }
线的属性:lineCap
直线lineCap属性:线帽,也就是线两端的样式,只有绘制较宽的线的,它才有效;
有三个有效值:butt\round\square
"butt":默认值,指定了线段应该没有线帽。
"round":线段应该带有一个半圆形的线帽,半圆的直径等于线段的宽度,并且线段在端点之外扩展了线段宽度的一半。
"square":线段应该带有一个矩形线帽。这个值和 "butt" 一样,但是线段扩展了自己的宽度的一半。
Example
function drawScreen() { context.strokeStyle = "#000000";//线的颜色 context.lineWidth = 10;//线的宽度 context.lineCap="butt";//butt\round\square context.beginPath();//启动path context.moveTo(20, 20); context.lineTo(100, 20); context.stroke();//绘画 context.closePath();//关闭path context.lineCap="round";//butt\round\square context.beginPath();//启动path context.moveTo(20, 40); context.lineTo(100, 40); context.stroke();//绘画 context.closePath();//关闭path context.lineCap="square";//butt\round\square context.beginPath();//启动path context.moveTo(20, 60); context.lineTo(100, 60); context.stroke();//绘画 context.closePath();//关闭path }
线的属性:lineJoin
lineJoin属性:表示两条线段如何连接;
当一个路径包含了线段或曲线相交的交点的时候,用lineJoin 属性来说明如何绘制这些交点;
该属性也有三个有效值:miter bevel round
"miter":默认值,两条线段的外边缘一直扩展到它们相交
"bevel":以一个斜边进行连接
"round":以一个圆弧边进行连接
Example
Example function drawScreen() { context.strokeStyle = "#000000"; context.lineWidth = 10; context.lineJoin = "miter"; context.beginPath(); context.moveTo(20, 20); context.lineTo(100, 20); context.lineTo(100, 40); context.stroke(); context.closePath(); context.lineJoin = "bevel"; context.beginPath(); context.moveTo(20, 60); context.lineTo(100, 60); context.lineTo(100, 80); context.stroke(); context.closePath(); context.lineJoin = "round"; context.beginPath(); context.moveTo(20, 100); context.lineTo(100, 100); context.lineTo(100, 120); context.stroke(); context.closePath(); context.lineJoin = "miter"; context.beginPath(); context.moveTo(20, 140); context.lineTo(100, 140); context.lineTo(80, 180); context.stroke(); context.closePath(); }
Arcs(圆弧)
一段圆弧可以是一个完整的圆也可以圆的一部分;
生成圆弧:context.arc()
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
参数依次代表圆心,半径、起始角度、终止角度、圆弧的方向; 角度都是以弧度来表示;
anticlockwise为布尔类型 ;true为顺时针、false为逆时针
Example
function drawScreen() { context.strokeStyle = "black"; context.lineWidth = 5; context.beginPath(); context.arc(100, 100, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.stroke(); context.closePath(); context.beginPath(); context.arc(100, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false); context.stroke(); context.closePath(); context.beginPath(); context.arc(100, 300, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, true); context.stroke(); context.closePath(); }
Bezier Curves(贝赛尔曲线)
Canvas支持二次 and 三次贝塞尔曲线的绘画
此处的贝塞尔曲线是定义在二维空间里的,需要一个起始点、一个终止点,再加上一个或者两个控制点来创建曲线;
控制点来决定所构造曲线的走向;
三次贝塞尔曲线需要两个点;
二次贝塞尔曲线需要一个点即可;
主要通过以下两个方法来绘画:
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)
二次贝塞尔曲线:
function drawScreen() { context.strokeStyle = "black"; context.lineWidth = 5; context.beginPath(); context.moveTo(0, 0); context.quadraticCurveTo(500, 25, 0, 100); context.stroke(); context.closePath(); }
曲线的起始点为(0,0),结束点为(0,100)
点(500,25)控制最终生成曲线的走向;
三次贝塞尔曲线:
function drawScreen() { context.strokeStyle = "black"; context.lineWidth = 5; context.beginPath(); context.moveTo(0, 0); context.bezierCurveTo(0, 125, 300, 175, 150, 300); context.stroke(); context.closePath(); }
曲线的起点(0,0),结束点(150,300)
(0, 125), (300, 175)这两个为控制点;
大家可能自己运行一下代码,看看效果,此处就不贴图了。。
发表评论
-
文字实现水平垂直居中
2014-01-11 09:58 915文字实现水平垂直居中的关键代码: display: ... -
CSS3 Media Queries在iPhone4和iPad上的运用
2014-01-07 00:01 1050http://www.w3cplus.com/css3/css ... -
小兔快跑
2013-11-20 15:42 616<!DOCTYPE html PUBLIC " ... -
box-sizing使用
2013-07-17 13:32 681box-sizing : content-box || bor ... -
如何通过CSS3的Clip制作饼图
2013-05-10 16:46 1033CSS3是个非常强大的玩意, 大家可以看看我的例子, 可以实现 ... -
CSS3的keyframe动画介绍
2013-05-07 13:50 495#sun.VeryHuo { animation-name ... -
CSS3 Media Queries
2013-04-27 10:44 813转载: http://www.w3cplus.co ... -
Three.js的模型软件Blender
2013-04-09 14:41 1122使用Blender软件可以非常简单的导出3D模型为json字符 ... -
本地文件拖拽到浏览器
2013-03-19 13:22 1062利用HTML5的File API可以实现文件拖拽到服务器上 直 ... -
最简单的拖拽效果
2013-01-28 16:46 772html5中提供了drag的效果, 通过事件可以进行拖拽元素, ... -
斜坡算法
2013-01-17 16:52 1444斜坡算法, 通过canvas画斜坡的算法, 知道这个算法后, ... -
如何创建一个Chrome应用
2013-01-08 15:48 0看附件的详细介绍 -
Canvas宝典
2012-12-13 15:35 695Canvas宝典, 神器!! -
CSS区分横屏和竖屏
2012-09-21 14:57 1204如何区分横屏和竖屏, 在CSS中? //竖屏 @media ... -
利用HTML5的WebGL制作的3D图形
2012-06-27 14:55 1628这里介绍一篇翻译的文章, 写的非常好, 大家可以去看看WebG ... -
KinticJs的基本用法
2012-06-11 15:42 928Kintic是html5中canvas的一个框架,效率高,包小 ... -
CSS3伪类选择器
2012-06-03 15:38 875CSS3的一个伪类选择器“:nth-child()”。 语法: ... -
input框语音功能
2012-04-06 12:26 942Webkit内核的input框带有语音功能, 请看实例 &l ... -
-webkit-内核滚动条样式覆盖
2012-02-23 21:18 1752今天看了下Chrome的网上商城, 感觉他们的滚动条很特别. ... -
CSS3 Border-Image图片裁剪用法
2012-02-17 01:17 1529转载:http://www.zhangxinxu.com/wo ...
相关推荐
html5 canvas 贝赛尔曲线,主要内容是帮助想研究贝赛尔曲线的同学提供这方面的文档
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
2.22_用canvas绘制一角弯月|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全
canvas鼠标拖动绘制任意矩形、多边形;在index.html页面中,根据drawType来绘制形状,矩形:drawType = 'rect'; 多边形:drawType =polygon
2.20_arc,圆弧和圆角矩形|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全系列
基于canvas的鼠标绘制矩形框的demo,多个canvas对象下支持选中,平移,删除操作,代码用VUE实现的
android 使用canvas把矩形图片变成圆角矩形显示 参考网址:http://blog.csdn.net/rhljiayou/article/details/7212620
2.23_quadraticCurveTo,二次贝塞尔曲线|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、
canvas实现的匀速移动矩形框的代码。使用requestAnimationframe 实现动画
根据HTML5中的Canvas,同时根据鼠标的移动来画矩形,可以成功运行,刚开始学,不会,折腾了好久,希望对需要的人有帮助。
2.24_bezierCurveTo,三次贝塞尔曲线|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开
2.25_canvas曲线的绘制小结|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全
也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas 将这块区域绘制出来,最后导出 canvas 即可,但是 canvas 没有直接提供圆角的绘制 api ,所以需要 曲线救国 ...
QML--Canvas画布实现矩形圆形等圈定
Android 自定义 直线箭头和曲线箭头 ,支持自定义颜色,通过两个或者三个坐标,绘制出来所需要的箭头 ,根据赛贝尔曲线及正切余弦等函数计算出箭头方向
canvas作直线、矩形、圆等基本图形的绘画
Canvas 中文名称叫“画布”,它是游戏中所有UI组件的“容器”。一个场景中,可以允许多个Canvas对象的存在,还允许Canvas之间可以进行“嵌套”使用。需要注意的是,场景中的任何一个UI对象,都肯定是某个Canvas对象...
微信小程序canvas画布绘制矩形、椭(圆)、直线、文字
二次贝赛尔曲线 /** * 二次贝塞尔曲线动画 * @param {Array<number>} start 起点坐标 * @param {Array<number>} 曲度点坐标(也就是转弯的点,不是准确的坐标,只是大致的方向) * @param {Array<number>} end 终点...
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制矩形方法,感兴趣的小伙伴们可以参考一下