一.canvas简介
<canvas>
是 HTML5
新增的,一个可以使用脚本(通常为JavaScript
)在其中绘制图像的 HTML
元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。
二.基本用法
要使用<canvas>元素,必须设置其width和height属性,指定可以绘图的区域大小,出现开始和结束标签中的内容是后背信息,如果浏览器不支持<canvas>元素,就会显示这些信息
<canvas id = 'drawing' width = '200' height = '200' > A darwing of something <canvas>
如果不给<canvas>
设置widht、height
属性时,则默认 width
为300、height
为150,单位都是px
。也可以使用css
属性来设置宽高,但是如宽高属性和初始比例不一致,他会出现扭曲。所以,建议永远不要使用css
属性来设置<canvas>
的宽高。
要在这块画布上绘图,需要取得绘图上下文,需要调用getContext()方法并传入上下文的名字,传入‘2d’
var drawing = document.getElementById('tutorial');
// 确定浏览器支持<canvas>元素
if(drawing.getContext){
var context = drawing.getContext('2d');
//更到代码
}
三.绘制矩形
矩形是一种可以直接在2D上下文绘制的形状,有关的方法为:fillRect(),strokeRect(),clearRect().
这三个方法都可以接受4个参数:矩形的x坐标,矩形的y坐标,矩形的宽度和矩形的高度
1.fillRect(),方法在画布上绘制矩形,填充的颜色通过fillStyle属性指定
<canvas width="200" height="200" id="drawing"></canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext('2d');
context.fillStyle = '#ff0000';
context.fillRect(10,10,50,50);
context.fillStyle =' rgba(0,0,255,0.5)';
context.fillRect(30,30,50,50);
}
</script>
2.strokeRect()方法在画布上会描边矩形,描边颜色通过syrokeStyle属性指定
<canvas width="200" height="200" id="drawing"></canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext('2d');
context.strokeStyle = '#ff0000';
context.strokeRect(10,10,50,50);
context.strokeStyle =' rgba(0,0,255,0.5)';
context.strokeRect(30,30,50,50);
}
</script>
描边线条的宽度由lineWidth属性控制,该属性可以使任意整数,另外,通过lineCap属性可以控制线条末端的形状是平头,圆头还是方头('butt','round','square') , 通过lineJoin属性可以控制线条相交的方式是圆交,斜交还是斜接('round','bevel','miter');
var lineCaps = ["butt", "round", "square"];
for (var i = 0; i < 3; i++){
ctx.beginPath();
ctx.moveTo(20 + 30 * i, 30);
ctx.lineTo(20 + 30 * i, 100);
ctx.lineWidth = 20;
ctx.lineCap = lineCaps[i];
ctx.stroke();
}
ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(300, 30);
ctx.moveTo(0, 100);
ctx.lineTo(300, 100)
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.stroke();
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 20;
for (var i = 0; i < lineJoin.length; i++){
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(50, 50 + i * 50);
ctx.lineTo(100, 100 + i * 50);
ctx.lineTo(150, 50 + i * 50);
ctx.lineTo(200, 100 + i * 50);
ctx.lineTo(250, 50 + i * 50);
ctx.stroke();
}
}
draw();
3.clearRect(x, y, widh, height)
清除指定的矩形区域,然后这块区域会变的完全透明。
<canvas width="200" height="200" id="drawing"></canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext('2d');
context.fillStyle = '#ff0000';
context.fillRect(10,10,50,50);
context.fillStyle =' rgba(0,0,255,0.5)';
context.fillRect(30,30,50,50);
context.clearRect(15, 15, 25, 25);
}
四、绘制路径(path
)
- 创建路径起始点
- 调用绘制方法去绘制出路径
- 把路径封闭
- 一旦路径生成,通过描边或填充路径区域来渲染图形。
beginPath()
新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径
moveTo(x, y)
把画笔移动到指定的坐标
(x, y)
。相当于设置路径的起始点坐标。
closePath()
闭合路径之后,图形绘制命令又重新指向到上下文中
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形
绘制线段:
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(200,20);
context.lineWidth = '10';
context.closePath();
context.stroke();
}
绘制三角形
虽然我们只绘制了两条线段,但是closePath会closePath,仍然是一个3角形
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(200,20);
context.lineTo(200,120);
context.closePath();
context.stroke();
}
填充三角形
fill会填充闭合区域。如果path没有闭合,则fill()会自动闭合路径。
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(200,20);
context.lineTo(200,120);
context.fill();
context.stroke();
}
绘制圆
arc(x, y, r, startAngle, endAngle, counterclockwise)
:
以(x, y)
为圆心,以r
为半径,从 startAngle
弧度开始到endAngle
弧度结束。anticlosewise
是布尔值,true
表示逆时针,false
表示顺时针。(默认是顺时针)
注意:
- 这里的度数都是弧度。
0
弧度是指的x
轴正方形
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext('2d');
context.beginPath();
context.arc(100,100,50,0,Math.PI,false);
context.stroke();
}
绘制一个不带数字的始终表盘
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext('2d');
context.beginPath();
context.arc(100,100,99,0,2* Math.PI,false);
context.moveTo(194,100)
context.arc(100,100,94,0,2* Math.PI,false);
context.moveTo(100,100);
context.lineTo(100,20);
context.moveTo(100,100);
context.lineTo(20,100);
context.stroke();
}
举几个例子:
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext("2d");
for (var i = 0; i < 3; i++){
for (var j = 0; j < 10; j++){
context.fillStyle = 'rgb(' + Math.floor(255 - 75 * i) + ',' +
Math.floor(255 - 22.5 * j) + ',0)';
context.fillRect(j * 50, i * 50, 50, 50);
}
}
}
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var ctx = drawing.getContext("2d");
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
ctx.strokeRect(j * 50, i * 50, 40, 40);
}
}
function randomInt(from, to){
return parseInt(Math.random() * (to - from + 1) + from);
}
}
虚线
用 setLineDash
方法和 lineDashOffset
属性来制定虚线样式. setLineDash
方法接受一个数组,来指定线段与间隙的交替;lineDashOffset
属性设置起始偏移量.
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.setLineDash([20, 5]); // [实线长度, 间隙长度]
ctx.lineDashOffset = -0;
ctx.strokeRect(50, 50, 210, 210);
}
draw();
五.绘制文本
canvas 提供了两种方法来渲染文本:
-
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
-
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.
var ctx;
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
ctx = canvas.getContext("2d");
ctx.font = "100px sans-serif"
ctx.fillText("hh", 10, 100);
ctx.strokeText("hh", 10, 200)
}
draw();
给文本添加样式
-
font = value
当前我们用来绘制文本的样式。这个字符串使用和
CSS font
属性相同的语法. 默认的字体是10px sans-serif
。 -
textAlign = value
文本对齐选项. 可选的值包括:
start
,end
,left
,right
orcenter
. 默认值是start
。 -
textBaseline = value
基线对齐选项,可选的值包括:
top
,hanging
,middle
,alphabetic
,ideographic
,bottom
。默认值是alphabetic。
-
direction = value
文本方向。可能的值包括:
ltr
,rtl
,inherit
。默认值是inherit。
六、绘制图片
三参数:context.drawImage(image,起点的x坐标,起点的y坐标)
五参数:context.drawImage(image,起点的x坐标,起点的y坐标,目标宽度和目标高度)
九参数:context.drawImage(image,源图像的x坐标,源图像的y坐标,源图像的宽度,源图像的高度,
目标图像的x坐标,目标图像的y坐标,目标图像的宽度,目标图像的高度)