快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门新葡亰黑平台_龟发之家论坛



接上一篇:HTML5初探绘制图像(上)canvas元素的应用

绘制渐变图形

fillStyle除了指定颜色外,还可以指定添补工具。

绘制线性渐变时,必要用到LinearGradient工具,创建函数为:

createLinearGradient(xStart, yStart, xEnd, yEnd);

xStart为渐变肇端横坐标

yStart为渐变肇端纵坐标

xEnd为渐变停止横坐标

yEnd为渐变停止纵坐标

经由过程该措施可以创建一个应用两个坐标点的LinearGradient工具。

而后在经由过程addColorStop进行颜色设定:

addColorStop(offset, color)

offset为所设定颜色脱离肇端点的偏移量(0,1之间)

color为指定的颜色。

由于是渐变至少必要应用两次addColorStop措施。

着末将fillStyle设定为LinearGradient工具履行添补变可绘制图形了。

绘制渐变图形

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style typ澳门新葡亰黑平台e="text/css">di澳门新葡亰黑平台v

{position: absolute;

width: 1px;height: 1px;

line-height: 1px;}

style>script src="../jquery-1.7.1.js" type="text/javascript">script>

script type="text/javascript">//x2 + y2 = r2;

$(document).ready(function () {//先画x,y

var canvas = $('#canvas')[0];var ctx = canvas.getContext('2澳门新葡亰黑平台d');

//#99d9ea

var g1 = ctx.createLinearGradient(0, 0, 0, 300);g1.addColorStop(0, 'gray');

g1.addColorStop(1, '#99d9ea');ctx.fillStyle = g1;

ctx.fillRect(0, 0, 400, 300);

});

script>head>

body>canvas id="canvas" width="400" height="300">

canvas>body>

html>

绘制径向渐变

径向渐变:沿着圆形的偏向向外进行扩散渐变,比如沿着太阳半径偏向扩散出去的光晕。

createRediaGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

radiusStart与radiusStart分手代表开始圆的半径与停止圆的半径

径向渐变

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

script src="../jquery-1.7.1.js" type="text/javascript">script>script type="text/javascript">

//x2 + y2 = r2;$(document).ready(function () {

//先画x,yvar canvas = $('#canvas')[0];

var ctx = canvas.getContext('2d');

//#99d9eavar g1 = ctx.createRadialGradient(400, 0, 0, 400, 0, 400);

g1.addColorStop(0.1, 'gray');g1.addColorStop(0.5, 'red');

g1.addColorStop(1, '#99d9ea');ctx.fillStyle = g1;

ctx.fillRect(0, 0, 400, 300);

});

script>head>

body>canvas id="canvas" width="400" height="300">

canvas>body>

html>

绘制变形图形

我们无意偶尔会碰到这么一个功能:扭转相册、放大年夜照片,这里就先容若何变形图形:

translate(x, y)用于移动坐标轴原点,默认在左上角

scale(x, y)用于将图形放大年夜,xy分手是各自坐标轴放大年夜的倍数

rotate(angle)用于扭转图形,angle为角度值

平移扩大年夜扭转图形

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

script src="../jquery-1.7.1.js" type="text/javascript">script>script type="text/javascript">

//x2 + y2 = r2;$(document).ready(function () {

//先画x,yvar canvas = $('#canvas')[0];

var ctx = ca澳门新葡亰黑平台nvas.getContext('2d');ctx.fillStyle = '#99d9ea';

ctx.fillRect(0, 0, 400, 300);

ctx.fillStyle = 'red';ctx.fillRect(10, 10, 50, 50);

ctx.translate(60, 60);//原点平移

ctx.fillRect(0, 0, 50, 50);

ctx.translate(60, 60); //原点平移ctx.scale(1.5, 1.2); //放大年夜

ctx.fillRect(0, 0, 50, 50);

ctx.translate(60, 60); //原点平移ctx.rotate(Math.PI / 10); //扭转

ctx.fillRect(0, 0, 50, 50);

});

script>head>

body>canvas id="canvas" width="400" height="300">

canvas>body>

html>

矩阵变换

变换矩阵:专门用来实现图形变形,与坐标共同应用,达到变形的目的。

transform(m11, m12, m21, m22, dz, dy)措施可修改变换矩阵

该措施应用一个新的变换矩阵与当前变换矩阵进行乘法运算m参数用以改动应用这个措施后,绘制图形的谋略措施,以达到变形的目的;dx与dy分腕表示将坐标原点在各自坐标上移动对应单位PS:这块我也看得迷迷糊糊的,听说必要掌握矩阵相关常识,我这里简述就是

这块常识点,我没有搞明白,暂时不描述了。

图形组合

多个图形之间可能发生重合。后呈现的会隐瞒先呈现的,无意偶尔我们想在上面做点操作,这里变供给了一个globalCompositeOperation属性抉择图形组合要领。

该属性翰墨很多,我这里直接上测试代码了:

图形组合

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

script src="../jquery-1.7.1.js" type="text/javascript">script>script type="text/javascript">

//x2 + y2 = r2;$(document).ready(function () {

//先画x,yvar canvas = $('#canvas')[0];

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';ctx.fillRect(10, 10, 60, 60);

ctx.globalCompositeOperation = 'xor';//lighterctx.beginPath();

ctx.fillStyle = 'red';ctx.arc(60, 60, 30, 0, Math.PI * 2);

ctx.fill();

});

script>head>

body>canvas id="canvas" width="400" height="300">

canvas>body>

html>

绘制阴影

绘制阴影只需设定以下属性:

shadowOffsetX

shadowOffsetY

shadowColor

shadowBlur 阴影隐隐范围

我是一个阴影

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

script src="../jquery-1.7.1.js" type="text/javascript">script>script type="text/javascript">

//x2 + y2 = r2;$(document).ready(function () {

//先画x,yvar canvas = $('#canvas')[0];

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';ctx.shadowOffsetX = 10;

ctx.shadowOffsetY = 10;ctx.shadowColor = 'red';

ctx.shadowBlur = 7.5;

ctx.fillRect(10, 10, 60, 60);

});

script>head>

body>canvas 澳门新葡亰黑平台id="canvas" width="400" height="300">

canvas>body>

html>

应用图像

绘制图像有以下几个措施:

drawImage(img, x, y)

drawImage(img, x, y, w, h)

drawImage(img, sx, sy, sw, sh, dz, dy, dw, dh)

前两个函数都很好理解,第三个我第一眼是没有看懂的:

sx\sy 分手代表源图像被复制区域在画布肇端横坐标纵坐标

sw\sh 表示被复制被复制区域的高宽(即做图像局部复制)

dx\dy 表示被复制后的图像在画布上的位置

dw\dh 表示着末的高宽

第一个和第二个便是是否缩放的差距:

上一张我的果照

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

script src="../jquery-1.7.1.js" type="text/javascript">script>script type="text/javascript">

$(document).ready(function () {draw();

});

function draw() {//获取canvas工具

var canvas =document.getElementById('canvas');if (canvas == null) {

return false;}

var ctx = canvas.getContext('2d');ctx.fillStyle = '#99d9ea';

ctx.fillRect(0, 0, 400, 300); //添补画布停止

var img = new Image();img.src = 'yexiaochai.jpg';

img.onload = function () {ctx.drawImage(img, 10, 10, 400, 300);

};}

script>head>

body>canvas id="canvas" width=400 height="300" >

canvas>br />

body>html>

指定高宽与不指定的差别。

您可能还会对下面的文章感兴趣: