专栏首页逸鹏说道06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(下)

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),作者:毒逆天

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 点击原文,查看笔...

    逸鹏
  • EF批量操作数据与缓存扩展框架

    在原生的EF框架中,针对批量数据操作的接口有限,EF扩展框架弥补了EF在批量操作时的接口,这些批量操作包括:批量修改、批量查询、批量删除和数据缓存,如果您想在E...

    逸鹏
  • C# 温故而知新:Stream篇(五)下

    对于重写的方法这里不再重复说明,大家可以参考我写的第一篇 以下是memoryStream独有的方法 virtual byte[] GetBuffer() 这个方...

    逸鹏
  • Canvas 基本绘制(下)

    HTML5学堂:在前一篇文章《Canvas 基本绘制(上)》当中,我们为大家介绍了Canvas的基本知识——什么是Canvas、如何使用Canvas进行图像的绘...

    HTML5学堂
  • HTML5之Canvas

    document.createElement("canvas").getContext("2d");

    疯狂的技术宅
  • canvas 实现自定义钟表

    参考博客:https://www.cnblogs.com/liugang-vip/p/3557983.html

    acoolgiser
  • HTML5动态时钟

    felix
  • canvas荧光表源码分享

    Youngxj
  • Canvas绘图——2d表

    初学JavaScript,用Canvas画一个表。主要用到昨天学的间歇调用(setInterval)。 方法和属性介绍 context.beginPath()、...

    刘开心_1266679
  • 实战:基于技术分析的Python算法交易

    本文是用 Python 做交易策略回测系列文章的第四篇。上个部分介绍了以下几个方面内容:

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券