BuN_Ny
- 浏览: 85533 次
- 来自: 济南
-
最新评论
-
lib：
速度很快啊！下手很早啊。
在Raspberry Pi上安装Nodejs环境 -
qalong：
如此好文，哪能不顶
Canvas入门实例08：三次方贝塞尔曲线 -
johnnycmj：
膜拜啊....
简单模拟Google的大马跑啊跑的Doodle -
BuN_Ny：
zeng1990 写道BuN_Ny 写道feizhang666 ...
17) 第二章 索引：优化索引(Optimizing) -
zeng1990：
BuN_Ny 写道feizhang666 写道现在已经是luc ...
17) 第二章 索引：优化索引(Optimizing)
文章列表
原文：http://blog.csdn.net/lovingprince/article/details/2774819
正则表达式在字符串处理中经常使用，关于正则简单的用法相信有一点程序基础的人都懂得一些，这里就不介绍简单基础了。这里主要讲解一下在JAVA中实现了的正则的高级用法-分组与捕获。
对于要重复单个字符，非常简单，直接在字符后卖弄加上限定符即可，例如 a+ 表示匹配1个或一个以上的a，a?表示匹配0个或1个a。这些限定符如下所示：
X ?
X ，一次或一次也没有
X *
X ，零次或多次
X +
...
过年回家翻出来以前写的东西...
- 博客分类：
- 其他
七月不远
----给海子，也熄灭我的爱情
七月不远
性别的诞生不远
思念不远----黑色雾水下
潮湿的脸
昔日的浪子
已觅回伙伴
因此我的疾病不远
嗅着今夜的光
我离你不远
兔子耳朵里的月光
填饱了长满羔羊 ...
主要合成属性有两个
context.globalAlpha = 0.5
指定在画布上绘制的内容的不透明度。这个值的范围在 0.0（完全透明）和 1.0（完全不透明）之间。默认值为 1.0
context.globalCompositeOperation = 'source-over'
绘制到画布上的颜色是如何与画布上已有的颜色组合的，默认值是 "source-over"。其它可能值如下：
示例几个效果图：
本文示例三次方贝塞尔曲线的画法。
方法如下：
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
其中，
cp1x 控制点1的横坐标
cp1y 控制点1的纵坐标
cp2x 控制点2的横坐标
cp2y 控制点2的纵坐标
x 终止点横坐标
y 终止点纵坐标
参考上一篇二次方贝塞尔曲线的画法很容易理解，只不过三次方贝塞尔曲线有两个控制点，可以在平面或三维空间(canvas暂未提供)中控制曲线的走向。
公式：
形成过程：
来实际画一下吧：
...
本文示例canvas二次方贝塞尔曲线的画法。
canvas画二次方贝塞尔曲线的方法如下：
context.quadraticCurveTo(cpx, cpy, x, y)
其中，
cpx 控制点横坐标
cpy 控制点纵坐标
x 终止点横坐标
y 终止点纵坐标
这样说太抽象，还是来看一下二次方贝塞尔曲线的公式：
公式中可以看出，影响二次方贝塞尔曲线的因素主要有三个：
1) 起始点P0 (t=0时)
2) 控制点P1
3) 终止点P2 (t=1时)
好吧，P1就是点(cpx,cpy)，P2即(x,y)，那么P0呢？自然是当前 ...
该方法的使用方式如下：
context.arcTo(x1, y1, x2, y2, radius)
其中，
x1 贯穿当前路径所在坐标的第一条切线的横坐标
y1 贯穿当前路径所在坐标的第一条切线的纵坐标
x2 贯穿(x1,y1)坐标的第二条切线的横坐标
y2 贯穿(x1,y1)坐标的第二条切线的横坐标
radius 弧半径
这也是一个画弧的方法。它仅被一些最新的浏览器支持。
先看一下效果：
function drawScreen(){
var context = theCanvas.getContext('2d') ...
本文综合前面的几个例子，画一个晾衣架。
function drawScreen(){
var context = theCanvas.getContext('2d');
context.strokeStyle = 'black';
context.lineWidth = 5;
context.beginPath();
context.moveTo(150,130);
context.lineTo(50,150);
context.arc(50, 175, 25, 1.5*Math.PI, ...
本文通过画一个笑脸示例canvas弧线的用法
Canvas画弧线的基本方法如下：
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
其中：
x 代表圆心横坐标
y 代表圆心纵坐标
radius 代表弧半径
startAngle 代表起始弧度
endAngle 代表结束弧度
anticlockwise 代表弧的方向，true为逆时针，false为顺时针
下面来画这个笑脸：
function drawScreen(){
var context = t ...
本文示例path联线之间的拐点样式。
function drawScreen(){
var context = theCanvas.getContext('2d');
context.strokeStyle = '#000000';
context.lineWidth = 20;
context.lineJoin = 'miter';
context.beginPath();
context.moveTo(20, 10);
context.lineTo(80, 10);
context.lineTo(80, 70);
co ...
Canvas入门实例02：简单的直线
- 博客分类：
- Canvas
本文示例canvas最基本的path操作：画一条直线。
function drawScreen(){
var context = theCanvas.getContext('2d');
context.strokeStyle = '#000000';
context.lineWidth = 10;
context.lineCap = 'square';
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
con ...
Canvas入门实例01：猜字母
- 博客分类：
- Canvas
本文通过一个猜字母游戏示例canvas的基本用法结构
<!doctype html>
<html lang="zh">
<head>
<meta charset="GBK">
<title>HTML5-猜字母</title>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;">
...
周五比较闲，用jQuery简单模拟了下Google的大公鸡，基本效果都实现了，但是思路不敢保证很好。
而且，Google为了鼠标事件更加精细，用了若干小div来处理，而我为了省事则直接在公鸡的各个部位处理了。因此点击事件的精细度远没他的好。
<div id="cock">
<div id="face"></div>
<div id="head"></div>
<div id="plumage1"></ ...
暂时能想到的一些思路如下，要是有高人路过，还望指点！！！
一、名词约定
* 发起人：流程的发起者。如请假流程中填写请假单并请假的人。
* 审批人：流程中需要完成审批任务的人。
* 节点：流程中任一由程序或 ...
网格
在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的HTML模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认网格，如图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x, y)）。后面的教程中我们将学会如何把移动原点，旋转以及缩放网格。不过现在我们会使用默认的状态。
绘制图形
不像 SVG，canv ...