一、canvas简介
是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。
它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。
Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。
Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 , Internet Explorer 从IE9开始 。Chrome和Opera 9+ 也支持 。
二、Canvas基本使用
2.1
<canvas id="tutorial" width="300" height="300">canvas>
- 1
看起来和 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。
如果不给设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置的宽高。
替换内容
由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者浏览器不支持HTML元素，在这些浏览器上你应该总是能展示替代内容。
支持的浏览器会只渲染标签，而忽略其中的替代内容。不支持 的浏览器则 会直接渲染替代内容。
用文本替换：
<canvas>
你的浏览器不支持canvas,请升级你的浏览器
canvas>
- 1
- 2
- 3
用
替换：
<canvas>
<img src="./美女.jpg" alt="">
canvas>
- 1
- 2
- 3
结束标签
与 元素需要结束标签()。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。
2.2 渲染上下文(Thre Rending Context)
会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。
我们重点研究 2D渲染上下文。 其他的上下文我们暂不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。
var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');
- 1
- 2
- 3
2.3 检测支持性
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2.4 代码模板
<html>
<head>
<title>Canvas tutorialtitle>
<style type="text/css">
canvas {
border: 1px solid black;
}
style>
head>
<canvas id="tutorial" width="300" height="300">canvas>
body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//开始代码
}
draw();
script>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
2.5 一个简单的例子
绘制两个长方形。
<html>
<head>
<title>Canvas tutorialtitle>
<style type="text/css">
canvas {
border: 1px solid black;
}
style>
head>
<canvas id="tutorial" width="300" height="300">canvas>
body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
//绘制矩形
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
draw();
script>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
三、绘制形状
3.1 栅格(grid)和坐标空间
如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。
后面我们会涉及到坐标原点的平移、网格的旋转以及缩放等。
3.2 绘制矩形
只支持一种原生的 图形绘制：矩形。所有其他图形都至少需要生成一种路径(path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。
canvast 提供了三种方法绘制矩形：
fillRect(x, y, width, height)绘制一个填充的矩形
strockRect(x, y, width, height)绘制一个矩形的边框
clearRect(x, y, widh, height)清除指定的矩形区域，然后这块区域会变的完全透明。
说明：
这3个方法具有相同的参数。
x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和高。
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillRect(10, 10, 100, 50); //绘制矩形,填充的默认颜色为黑色
ctx.strokeRect(10, 70, 100, 50); //绘制矩形边框
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
ctx.clearRect(15, 15, 50, 25);
- 1
四、绘制路径(path)
图形的基本元素是路径。
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
一个路径，甚至一个子路径，都是闭合的。
使用路径绘制图形需要一些额外的步骤：
- 创建路径起始点
- 调用绘制方法去绘制出路径
- 把路径封闭
- 一旦路径生成，通过描边或填充路径区域来渲染图形。
下面是需要用到的方法：
beginPath()新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y)把画笔移动到指定的坐标
(x, y)。相当于设置路径的起始点坐标。closePath()闭合路径之后，图形绘制命令又重新指向到上下文中
stroke()通过线条来绘制图形轮廓
fill()通过填充路径的内容区域生成实心的图形
4.1 绘制线段
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath(); //新建一条path
ctx.moveTo(50, 50); //把画笔移动到指定的坐标
ctx.lineTo(200, 50); //绘制一条从当前位置到指定坐标(200, 50)的直线.
//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
ctx.closePath();
ctx.stroke(); //绘制路径。
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
4.2 绘制三角形边框
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
ctx.stroke(); //描边。stroke不会自动closePath()
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
4.3 填充三角形
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
4.4 绘制圆弧
有两个方法可以绘制圆弧：
arc(x, y, r, startAngle, endAngle, anticlockwise):以
(x, y)为圆心，以r为半径，从startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)注意：
- 这里的度数都是弧度。
0弧度是指的x轴正方形
radians=(Math.PI/180)*degrees //角度转换成弧度- 1
arcTo(x1, y1, x2, y2, radius):根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。
圆弧案例1：
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
圆弧案例2：
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI, false);
ctx.fill();
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
圆弧案例3：
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
//参数1、2：控制点1坐标 参数3、4：控制点2坐标 参数4：圆弧半径
ctx.arcTo(200, 50, 200, 200, 100);
ctx.lineTo(200, 200)
ctx.stroke();
ctx.beginPath();
ctx.rect(50, 50, 10, 10);
ctx.rect(200, 50, 10, 10)
ctx.rect(200, 200, 10, 10)
ctx.fill()
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
arcTo方法的说明：
这个方法可以这样理解。绘制的弧形是由两条切线所决定。
第 1 条切线：起始点和控制点1决定的直线。
第 2 条切线：控制点1 和控制点2决定的直线。
其实绘制的圆弧就是与这两条直线相切的圆弧。
4.5 绘制贝塞尔曲线
4.5.1 什么是贝塞尔曲线
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。
一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。
贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。
一次贝塞尔曲线(线性贝塞尔曲线)
一次贝塞尔曲线其实是一条直线。
二次贝塞尔曲线
三次贝塞尔曲线
4.5.2 绘制贝塞尔曲线
绘制二次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y):
说明：
参数1和2：控制点坐标
参数3和4：结束点坐标
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 200); //起始点
var cp1x = 40, cp1y = 100; //控制点
var x = 200, y = 200; // 结束点
//绘制二次贝塞尔曲线
ctx.quadraticCurveTo(cp1x, cp1y, x, y);
ctx.stroke();
ctx.beginPath();
ctx.rect(10, 200, 10, 10);
ctx.rect(cp1x, cp1y, 10, 10);
ctx.rect(x, y, 10, 10);
ctx.fill();
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
绘制三次贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：
说明：
参数1和2：控制点1的坐标
参数3和4：控制点2的坐标
参数5和6：结束点的坐标
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(40, 200); //起始点
var cp1x = 20, cp1y = 100; //控制点1
var cp2x = 100, cp2y = 120; //控制点2
var x = 200, y = 200; // 结束点
//绘制二次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
ctx.beginPath();
ctx.rect(40, 200, 10, 10);
ctx.rect(cp1x, cp1y, 10, 10);
ctx.rect(cp2x, cp2y, 10, 10);
ctx.rect(x, y, 10, 10);
ctx.fill();
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
五、添加样式和颜色
在前面的绘制矩形章节中，只用到了默认的线条和颜色。
如果想要给图形上色，有两个重要的属性可以做到。
fillStyle = color设置图形的填充颜色
strokeStyle = color设置图形轮廓的颜色
备注：
1. `color` 可以是表示 `css` 颜色值的字符串、渐变对象或者图案对象。
2. 默认情况下，线条和填充颜色都是黑色。
3. 一旦您设置了 `strokeStyle` 或者 `fillStyle` 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 `fillStyle` 或 `strokeStyle` 的值。
- 1
- 2
- 3
- 4
fillStyle
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
Math.floor(255 - 42.5 * j) + ',0)';
ctx.fillRect(j * 50, i * 50, 50, 50);
}
}
}
draw();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
strokeStyle
-
聆听-往昔： 6的一皮 教程网都没这么详细。 给大佬点烟，递茶。 (08-15 15:45 #13楼) 举报回复
-
有点帅的bingo： 叼的一批，mark (08-14 17:23 #12楼) 举报回复
-
_咸鱼丶： 6的一皮 教程网都没这么详细。 给大佬点烟，递茶。 (08-03 11:35 #11楼) 举报回复
-
起风了_Corer高橋優： 6的一皮 教程网都没这么详细。 给大佬点烟，递茶。 (08-02 16:26 #10楼) 举报回复
-
qq_34749898： 对博主的崇拜犹如滔滔江水，延绵不绝 (08-01 17:07 #9楼) 查看回复(1)举报回复 -
-
一名清官回复 qq_34749898： 如黄河泛滥，一发不可收拾 (08-06 17:57) 举报回复
-
- 上一页
- 1
- 2
- 3
- 下一页
HTML5应用——生日快乐动画
jin123wang
02-21 1.2万
这几天一直在编写一个关于生日快乐的HTML5动画（过几天就是暗恋对象生日，咱们程序员也浪漫一次，你懂的），用HTML5制作小型动画还是不错的，也比较方便。 与Flash相比，优点是通过代码和算法设计可…
JavaScript之Canvas画布
h15882065951
04-18 7922
HTML5有个强大的功能，就是利用canvas进行画图。
Html5 Cavans之高级内容上篇 - CSDN博客
6-23
Html5 Cavans之高级内容上篇 1.阴影 2.globalAlpha和globalCompositeOperation 3.路径方向和剪纸效果 4.isPointInPath(x,y) 方法
HTML5 cavans的使用 - CSDN博客
7-15
HTML5 cavans的使用2015年08月18日 15:46:17 阅读数:982 一、 Canvas是什么? Canvas就是一个画布,可以进行画任何的线、图形、填充等一系列的操作,而且…
Html5 Canvas挑战你的想象力
llmlx
07-03 630
超级厉害的Html5 Canvas 看了这个才知道什么叫做牛逼。http://www.effectgames.com/effect/article.psp.html/joe/OldSchoo…
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放 - CSDN博客
7-3
代码使用到的js插件:jquery、bootstrap、lrz。 jquery就不说了,基本都知道。bootstrap是一个响应式的前端ui框架。使用它是为了在手机端查看页面时能够自适应宽高。…
HTML5 Cavans(8) 图像 - CSDN博客
6-17
HTML5 Cavans(8) 图像2017年04月01日 08:13:20 阅读数:699 $代表jquery window.onload = function () { var cancans = document.getElementById(“myCanvas…
7款超华丽的HTML5 Canvas文字动画特效
zz901214
11-08 8078
文字是网页中最为常见的元素之一，当然我们使用最多的就是调整文字的颜色、大小等基本属性。有时候我们在一些活动页面上需要展示特别样式的文字效果，这时候我们就可以利用HTML5或者CSS3结合的方式来渲染文…
HTML5 Canvas编写五彩连珠（6）：试玩
maddemon
03-19 2751
上节中讲了如何寻路，在和朋友们讨论时都反应有时走的不太对，绕远路了，其实代码主要是大方向的判断 比如目标在右上，那应该是先右还是先上 这个并没有做处理，如果这个做了处理，效果会更好一些，但也难免会走…
Html5 cavans 交互
8-18
*版权证明: 只允许上传png/jpeg/jpg/gif格式的图片,且小于3M *详细原因: 取 消 提 交 Html5 cavans 交互 1积分 立即下载 …
cavans 星空
7-29
利用cavans技术绘制的星空带音乐;… 利用cavans技术绘制的星空带音乐; 综合评分:0 收藏评论举报 所需: 3积分/C币 开通VIP 立即下载 评论共有0条 星空外挂 V6.9…