一:什么是canvas
canvas是一对标签;canvas
是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.它可以用于制作照片集或者制作简单(也不是那么简单)的动画。canvas拥有和其他标签一样的通用属性,如id,width,height,background等等。
二:canvas的基本使用
1、获取context对象
通过脚本(通常为JavaScrip)在canvas中绘制图形主要是通过context对象,context对象的获取方法如下
//首先通过ID获取canvas
var canvas = document.getElementById("canvas");
//然后通过canvas获取context对象,注意获取方法中的参数为2d
var context = canvas.getContext("2d");
2、绘制基本图形
canvas中可以绘制矩形、路径(通过路径绘制其他图形)、文本、图片
(1)绘制矩形
fillRect(x,y,width,height):绘制一个填充的矩形
(参数说明:x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。width和height设置矩形的尺寸)
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
效果图:
(2)绘制路径
绘制路径的一些步骤:
- 首先,你需要创建路径起始点。
- 然后你使用画图命令去画出路径。
- 之后你把路径封闭。
- 一旦路径生成,你就能通过描边或填充路径区域来渲染图形。
绘制路径所用的函数的说明:
beginPath():新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。
moveTo(x,y):将笔触移动到指定的坐标x以及y上。(即起始点,从这个点(x,y)可以画)
lineTo(x,y):绘制一条从当前位置到指定x以及y位置的直线。
arcTo(x1,y1,x2,y2,radius):根据给定的控制点和半径画一段圆弧,再以直线连接两个控制点。
closePath()
:闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
:通过线条来绘制图形轮廓。
fill()
:通过填充路径的内容区域生成实心的图形
例子:画笑脸
function smileFace(){
canvas = document.getElementById("canvas");
if(canv.getContext){
var context = canv.getContext("2d");
context.beginPath();
context.arc(50,50,50,0,Math.PI*2,false);
context.stroke();
context.moveTo(25,30);
context.arc(25,30,2,0,Math.PI*2,true);
context.stroke();
context.moveTo(75,30);
context.arc(75,30,2,0,Math.PI*2,true);
context.stroke();
context.moveTo(50,60);
context.arc(50,60,2,0,Math.PI*2,true);
context.stroke();
context.moveTo(37,75);
context.arcTo(60,78,63,75,15);
context.stroke();
}
}
效果图:
(3)绘制文本
canvas 提供了两种方法来渲染文本:
fillText(text,x,y[,maxWidth])
:在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
fillText(text,x,y[,maxWidth])
:在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.
例子:
//文本
function tx(){
if(canv.getContext){
var context = canv.getContext("2d");
//设置字体的样式
content.font ="100px serif";
context.strokeText("hello world!",50,50);
context.fillText("hello world!",50,100)
}
}
效果图:
(4)使用图片
引入图像到canvas里需要以下两步基本操作:
- 获得一个指向
HTMLImageElement
的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片 - 使用
drawImage()
函数将图片绘制到画布上
canvas的API可以使用下面这些类型中的一种作为图片的源:
HTMLImageElement
:这些图片是由
Image()函数构造出来的,或者任何的<img>
元素
HTMLVideoElement
:用一个HTML的
<video>
元素作为你的图片源,可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement
:可以使用另一个
<canvas>
元素作为你的图片源。
ImageBitmap
:这是一个高性能的位图,可以低延迟地绘制,它可以从上述的所有源以及其它几种源中生成。
//图片和阴影
function pic(){
if(canv.getContext){
var context = canv.getContext("2d");
var img = new Image();
img.src = "img/0.jpg";
img.onload = function(){
var pattern = context.createPattern(img,"no-repeat");
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.shadowBlur = 10;
context.shadowColor = "rgba(0,0,0,0.7)";
context.fillStyle = pattern;
context.fillRect(0,0,300,300);
}
}
}
这一篇只是介绍canvas的简单使用,下一篇会介绍canvas的一些好玩的知识点