06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(下)

矩 阵 变 化

其实像 translate(移动),scale(缩放),rotate(旋转)都是特殊的矩阵变换

transform(m11,m12,m21,m22,dx,dy)

替换当前的变换矩阵(transform() 允许您缩放、旋转、移动并倾斜当前的环境)

http://www.w3school.com.cn/tags/canvas_transform.asp

参数图解

本质公式

参数详解

水平缩放绘图

m11

水平倾斜绘图

m12

垂直倾斜绘图

m21

垂直缩放绘图

m22

水平移动绘图

dx

垂直移动绘图

dy

setTransform(m11,m12,m21,m22,dx,dy)

重置并创建新的变换矩阵

http://www.w3school.com.cn/tags/canvas_settransform.asp

小案例

<canvas id="canvasOne" width="600" height="600"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

context.translate(200, 20);

for (var i = 1; i < 90; i++) {

context.save();

//参数:水平缩放绘图,水平倾斜绘图,垂直倾斜绘图,垂直缩放绘图,水平移动绘图,垂直移动绘图

context.transform(0.95, 0, 0, 0.95, 30, 30);

context.rotate(Math.PI / 12);//旋转角度

context.beginPath();

context.fillStyle = "rgba(255,0,0,0.5)";

context.arc(0, 0, 50, 0, Math.PI * 2, true);

context.closePath();

context.fill();

}

//参数:水平缩放绘图,水平倾斜绘图,垂直倾斜绘图,垂直缩放绘图,水平移动绘图,垂直移动绘图

context.setTransform(1, 0, 0, 1, 10, 10);

//检验一下是否变化过来了

context.fillStyle = "blue";

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

context.fill();

</script>

扩 展 样 式

线形属性

lineWidth

设置线条粗细默认为1,为正数

<canvas id="canvasOne" width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

for (var i = 1; i < 12; i++) {

context.strokeStyle = 'rgb(255,0,0)';

context.lineWidth = i;

context.beginPath();

context.moveTo(i * 20, 0);

context.lineTo(i * 20, 300);

//context.closePath();

context.stroke();

}

</script>

lineCap

设置端点样式

butt

平头

默认

round

圆头

square

方头

<canvas id="canvasOne" width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

//定义数组

var lineCap = ['butt', 'round', 'square'];

// 绘制参考线。

context.strokeStyle = 'red';

context.beginPath();

context.moveTo(10,10);

context.lineTo(10,150);

context.moveTo(150,10);

context.lineTo(150,150);

context.stroke();

// 绘制直线段。

context.strokeStyle = 'blue';

for (var i = 0; i < lineCap.length; i++) {

context.lineWidth = 20;

context.lineCap = lineCap[i];

context.beginPath();

context.moveTo(10, 30 + i * 50);

context.lineTo(150, 30 + i * 50);

context.stroke();

}

</script>

lineJoin

设置连接处样式

round

bevel

斜面

miter

默认

<canvas id="canvasOne" width="500" height="200"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

var lineJoin = ['round', 'bevel', 'miter'];

context.strokeStyle = 'rgb(0,0,0)';

for (var i = 0; i < lineJoin.length; i++) {

context.lineWidth = 25;

context.lineJoin = lineJoin[i];

context.beginPath();

context.moveTo(10 + i * 150, 30);

context.lineTo(100 + i * 150, 30);

context.lineTo(100 + i * 150, 100);

context.stroke();

}

</script>

miterLimit

设置或返回最大斜接长度

前提

lineJoin使用默认属性(miter)

<canvas id="canvasOne" width="1600" height="300"></canvas>

<script type="text/javascript">

var context = document.getElementById('canvasOne').getContext('2d');

for (var i = 1; i < 10; i++) {

context.strokeStyle = 'blue';

context.lineWidth = 10;

context.lineJoin = 'miter';

context.miterLimit = i * 10;

context.beginPath();

context.moveTo(10, i * 30);

context.lineTo(100, i * 30);

context.lineTo(10, 33 * i);

context.stroke();

}

</script>

渐 变 系 列

线形渐变

createLinearGradient(x0, y0, x1, y1)

请使用该对象作为 strokeStyle 或 fillStyle 属性的值

x0,y0

渐变起点

x1,y1

渐变终点

addColorStop(position, color);

一般都是设置多个色标

position

色相偏移值

取值 0~1

color

颜色

并非一定从0开始,1结束

<canvas id="canvasOne" width="300" height="300"></canvas>

<script type="text/javascript">

var context = document.getElementById('canvasOne').getContext('2d');

var lingrad = context.createLinearGradient(0, 0, 0, 200);

lingrad.addColorStop(0, '#ff0000');

lingrad.addColorStop(1 / 7, '#ff9900');

lingrad.addColorStop(2 / 7, '#ffff00');

lingrad.addColorStop(3 / 7, '#00ff00');

lingrad.addColorStop(4 / 7, '#00ffff');

lingrad.addColorStop(5 / 7, '#0000ff');

lingrad.addColorStop(6 / 7, '#ff00ff');

lingrad.addColorStop(1, '#ff0000');

context.fillStyle = lingrad;

context.fillRect(10, 10, 200, 200);

</script>

var c = document.getElementById('myCanvas');

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

var grd = ctx.createLinearGradient(0, 0, 170, 0);

grd.addColorStop(0.1, 'rgb(255,255,255)');

grd.addColorStop(0.5, 'rgb(0,100,0)');

grd.addColorStop(0.9, 'rgb(0,0,0)');

ctx.fillStyle = grd;

ctx.fillRect(20, 20, 150, 100);

径向渐变

createRadialGradient(x1,y1,r1,x2,y2,r2)

以(x1,y1)为原点,r1为半径的圆

以(x2,y2)为原点,r2为半径的圆

addColorStop(position, color);

一般都是设置多个色标

position

色相偏移值

取值 0~1

color

颜色

并非一定从0开始,1结束

<canvas id="myCanvas" width="300" height="240"></canvas>

<script language="javascript">

var ctx = document.getElementById('myCanvas').getContext('2d');

var radgrad = ctx.createRadialGradient(55, 55, 20, 100, 100, 90);

radgrad.addColorStop(0, 'rgb(255,255,0)');

radgrad.addColorStop(0.75, 'rgb(255,0,0)');

radgrad.addColorStop(1, 'rgb(255,255,255)');

ctx.fillStyle = radgrad;

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

</script>

创 建 阴 影

参数

shadowOffsetX

shadowOffsetX 属性设置或返回形状与阴影的水平距离

shadowOffsetX=0 指示阴影位于形状的正下方。

shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。

shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。

shadowOffsetY

shadowOffsetY 属性设置或返回形状与阴影的垂直距离。

shadowOffsetY=0 指示阴影位于形状的正下方。

shadowOffsetY=20 指示阴影位于形状 top 位置下方的 20 像素处。

shadowOffsetY=-20 指示阴影位于形状 top 位置上方的 20 像素处。

shadowBlur

shadowBlur 属性设置或返回阴影的模糊级数。

shadowColor

shadowColor 属性设置或返回用于阴影的颜色

<canvas id="canvasOne" width="600" height="600"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

//设置前画个图

context.fillStyle = '#0094ff';

context.fillRect(410, 310, 50, 50);

//设置阴影

context.shadowOffsetX = 3;

context.shadowOffsetY = 3;

context.shadowBlur = 1;

context.shadowColor = '#808080';

//画矩形

context.fillRect(200, 200, 200, 100);

//绘图

var img = new Image();

img.src = '/images/1.jpg';

img.onload = function () {

context.fillStyle = context.createPattern(img, 'no-repeat');

context.fillRect(0, 0, 600, 600);

}

</script>

绘制文字

绘制填充文字

fillText(str,x,y,[mw])

str

文字内容

x,y

起点坐标

mw

最大宽度

可选参数

绘制文字轮廓

strokeText(str,x,y,[mw])

str

文字内容

x,y

起点坐标

mw

最大宽度

可选参数

测量文字宽度

measureText(str)

context.measureText(str).width

文字宽度

str

文字内容

文字系列属性

context.font

语法

context.font="italic small-caps bold 12px arial";

font-style

规定字体样式。可能的值:

normal

italic

斜体字

oblique

倾斜

font-variant

规定字体变体。可能的值:

normal

small-caps

大写

font-weight

规定字体的粗细。可能的值:

normal

bold

bolder

lighter

100

font-family

规定字体系列。

font-size / line-height

规定字号和行高,以像素计。

icon

使用用于标记图标的字体。

menu

使用用于菜单中的字体(下拉列表和菜单列表)。

caption

使用标题控件的字体(比如按钮、下拉列表等)。

status-bar

使用用于窗口状态栏中的字体。

message-box

使用用于对话框中的字体。

small-caption

使用用于标记小型控件的字体。

案例

<canvas id="canvasOne" width="500" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

var str = 'http://dnt.dkill.net';

context.fillStyle = 'rgba(255,0,0,0.9)';

context.strokeStyle = 'rgba(255,0,0,0.9)';

context.font = '30px 微软雅黑';

context.strokeText(str, 100, 40);

console.log(context.measureText(str).width);

context.fillText(str, 100, 80);

console.log(context.measureText(str).width);

context.font = 'bold 30px 微软雅黑';

context.strokeText(str, 100, 150);

console.log(context.measureText(str).width);

context.fillText(str, 100, 180);

console.log(context.measureText(str).width);

</script>

图像系列

1.图像来源

路径图片

直接对 src 赋值

var img=new Image();

img.src='xxx';

页面图片

来源于页面,如果已知id则可通过

document.images 集合

document.getElementsByTagName

document.getElementsById

其他canvas元素

document.getElementsByTagName

document.getElementsById

2.drawImage绘图

context.drawImage(img,x,y)

在画布上定位图像

img 规定要使用的图像、画布或视频。

x 在画布上放置图像的 x 坐标位置。

y 在画布上放置图像的 y 坐标位置。

//获取路径图片

document.getElementById('btn1').onclick = function () {

clearCanvas(context);

var img1 = new Image();

img1.src = '/images/1.jpg';

context.drawImage(img1, 150, 150);

}

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

在画布上定位图像,并规定图像的宽度和高度

img 规定要使用的图像、画布或视频。

x 在画布上放置图像的 x 坐标位置。

y 在画布上放置图像的 y 坐标位置。

w 要使用的图像的宽度。(伸展或缩小图像)

h 要使用的图像的高度。(伸展或缩小图像)

//获取页面图片

document.getElementById('btn2').onclick = function () {

clearCanvas(context);

var img2 = document.getElementById('imgOne');

context.drawImage(img2, 150, 150, 200, 200);

}

context.drawImage(img,sx,sy,sw,sh,x,y,w,h)

剪切图像,并在画布上定位被剪切的部分

img 规定要使用的图像、画布或视频。

sx 开始剪切的 x 坐标位置。

sy 开始剪切的 y 坐标位置。

sw 被剪切图像的宽度。

sh 被剪切图像的高度。

x 在画布上放置图像的 x 坐标位置。

y 在画布上放置图像的 y 坐标位置。

w 要使用的图像的宽度。(伸展或缩小图像)

h 要使用的图像的高度。(伸展或缩小图像)

//从Canvas获取

document.getElementById('btn3').onclick = function () {

clearCanvas(context);

var img3 = document.getElementById('canvasTwo');

context.drawImage(img3, 150, 150, 300, 250, 50, 50, 400, 300);

}

扩展(不完美)

createPattern(image,type)

image

规定要使用的图片、画布或视频元素

var img=new Image();

type

是否重发

repeat|repeat-x|repeat-y|no-repeat

<canvas id="canvasOne" width="600" height="600"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

var img = new Image();

img.src = '/images/1.jpg';

img.onload = function () {

context.fillStyle = context.createPattern(img, 'repeat');

context.fillRect(0, 0, 600, 600);

}

</script>

注意:

context.fillRect(100, 0, 600, 600);

这里的fillRect(x,y,w,h)。x,y既指的是坐标原点,也指的是图片原点

扩展部分

绘制贝塞尔曲线

二次方贝塞尔曲线

quadraticCurveTo(cp1x,cp1y,x,y)

cp1x,cp1y是控制点坐标

x,y是终点坐标

<canvas id="myCanvas" style="border:1px solid;" width="300" height="200"></canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

// 下面开始绘制二次方贝塞尔曲线。

context.strokeStyle="dark";

context.beginPath();

context.moveTo(0,200);

context.quadraticCurveTo(75,50,300,200);

context.stroke();

context.globalCompositeOperation="source-over";

// 下面绘制的直线用于表示上面曲线的控制点和控制线,控制点坐标即两直线的交点(75,50)。

context.strokeStyle="#ff00ff";

context.beginPath();

context.moveTo(75,50);

context.lineTo(0,200);

context.moveTo(75,50);

context.lineTo(300,200);

context.stroke();

</script>

三次方贝塞尔曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

cp1x,cp1y是控制点坐标

cp2x,cp2y是第二个控制点坐标

x,y是终点坐标

<canvas id="myCanvas" width="300" height="200"></canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

// 下面开始绘制三次方贝塞尔曲线。

context.strokeStyle="dark";

context.beginPath();

context.moveTo(0,200);

context.bezierCurveTo(25,50,75,50,300,200);

context.stroke();

context.globalCompositeOperation="source-over";

// 下面绘制的直线用于表示上面曲线的控制点和控制线,控制点坐标为(25,50)和(75,50)。

context.strokeStyle="#ff00ff";

context.beginPath();

context.moveTo(25,50);

context.lineTo(0,200);

context.moveTo(75,50);

context.lineTo(300,200);

context.stroke();

</script>

组合裁切

组合

globalCompositeOperation

设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上

裁切

clip()

从原始画布中剪切任意形状和尺寸

案例

从画布中剪切 200*120 像素的矩形区域。然后,绘制绿色矩形。只有被剪切区域内的绿色矩形部分是可见的

<p>不使用 clip():</p>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.rect(50, 20, 200, 120);

ctx.stroke();

ctx.fillStyle = "green";

ctx.fillRect(0, 0, 150, 100);

</script>

<br />

<p>使用 clip():</p>

<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

<script>

var c = document.getElementById("myCanvas2");

var ctx = c.getContext("2d");

// Clip a rectangular area

ctx.rect(50, 20, 200, 120);

ctx.stroke();

ctx.clip();

// Draw red rectangle after clip()

ctx.fillStyle = "green";

ctx.fillRect(0, 0, 150, 100);

</script>

案例2

<canvas id="myCanvas" style="border:1px solid;" width="300" height="300"></canvas>

<script type="text/javascript">

function draw() {

var ctx = document.getElementById('myCanvas').getContext("2d");

// 绘制背景。

ctx.fillStyle = "black";

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

ctx.fill();

// 绘制圆形。

ctx.beginPath();

ctx.arc(150, 150, 130, 0, Math.PI * 2, true);

// 裁切路径。

ctx.clip();

ctx.translate(200, 20);

for (var i = 1; i < 90; i++) {

ctx.save();

ctx.transform(0.95, 0, 0, 0.95, 30, 30);

ctx.rotate(Math.PI / 12);

ctx.beginPath();

ctx.fillStyle = "red";

ctx.globalAlpha = "0.4";

ctx.arc(0, 0, 50, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();

}

}

window.onload = function () {

draw();

}

</script>

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Linux驱动

31.QPainter-rotate()函数分析-文字旋转不倾斜,图片旋转实现等待

30.QT-渐变之QLinearGradient、 QConicalGradient、QRadialGradient

1223
来自专栏河湾欢儿的专栏

css3线性、径向渐变

背景线性渐变 background: linear-gradient(); 第一个参数: (角度 或者是一个线性的方向)可选的 默认的是(to botto...

1163
来自专栏糊一笑

深入常用CSS声明(一) —— Background

一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这...

4325
来自专栏数据小魔方

sparklines迷你图系列14——Correlation(HeatMap)

今天跟大家分享的是sparklines迷你图系列13——Correlation(HeatMap)。 热力图在excel中可以轻松的通过自带的条件格式配合单元格数...

3176
来自专栏前端知识分享

第99天:CSS3中透视perspective

与之前的过程相同,视点与移动后的元素的连线与屏幕的焦点就是在屏幕上的呈现的元素的大小,与元素相比较变大了。

752
来自专栏天天

Canvas高级

1811
来自专栏练小习的专栏

浏览器亚像素渲染与小数位的取舍

在响应式项目中,百分比的数值的应用越来越多,比如栅格化布局、背景定位、内边距等。以往对于这种数值,我们大都是直接采用计算器计算出来的数值。但这种数值有时会很长,...

2045
来自专栏Android Note

Android – 环形进度条

1905
来自专栏cnblogs

Css3新特性应用之视觉效果

一、单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sah...

2059
来自专栏Android知识点总结

Android关于Path你所知道的和不知道的一切

2816

扫码关注云+社区

领取腾讯云代金券