- 简述
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。 标记和 SVG以及 VML 之间的一个重要的不同是,< canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成,但功能明显要弱一些。
canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。
- 创建canvas元素
创建了canvas元素后,要在canvas元素上面绘制图象,首先必须获取canvas环境上下文:canvas.getContext(画布上绘制的类型)
2d: 表示2维
experimental-webgl: 表示试验版3维
webgl:表示3维
例1:绘制线条
<canvas id="can"></canvas>
<script>
var can=document.getElementById("can"); //获取canvas元素
//动态设置宽和高
//获取屏幕的可视区域宽与高
var window_w=document.documentElement.clientWidth;
var window_h=document.documentElement.clientHeight;
can.width=window_w;
can.height=window_h;
//操作canvas
var content=can.getContext("2d"); //转换为2d模式
//使用js提供的API设置
/*1.绘制线条*/
content.lineWidth=10; /*设置线宽*/
content.strokeStyle="red"; /*设置线的颜色*/
content.moveTo(0,0); /*将画笔移动到0,0点*/
content.lineTo(300,400); /*画线到300,400点*/
content.stroke(); /*执行画线*/
</script>
运行效果:
在页面上就显示了一条直线,另存为后就是一张背景透明的png图片。
-
画线
context.moveTo(x,y):把画笔移动到x,y坐标,建立新的子路径; context.lineTo(x,y):建立上一个点到x,y坐标的直线,如果没有上一个点,则等同于moveTo(x,y),把(x,y)添加到子路径中; context.stroke() :执行画线
例2:结合javascript事件实现鼠标自由划线:
<canvas id="can"></canvas>
<script>
var can=document.getElementById("can"); //获得画布元素
//动态设置宽和高
//获取屏幕的可视区域宽与高
var window_w=document.documentElement.clientWidth;
var window_h=document.documentElement.clientHeight;
can.width=window_w;
can.height=window_h;
var content=can.getContext("2d"); //获得2维绘图的上下文
content.lineWidth=8; //设置线宽
content.strokeStyle="gold"; //设置线的颜色
//设置鼠标移动事件
can.onmousemove=function(e){
content.lineTo(e.clientX, e.clientY); //划线到当前客户端的x与y坐标
content.stroke(); //执行画线
}
</script>
运行效果:
-
路径与beginPath,closePath,fill
canvas的环境上下文中总有唯一一个路径,路径包含多个子路径,这些子路径可以看成是一系列点的集合。 beginPath():清空子路径,一般用于开始路径的创建;在几次循环地创建路径的过程中,每次开始创建时都要调用beginPath函数。 closePath():如果当前子路径是打开的,就关闭它;否则把子路径中的最后一个点和路径中的第一个点连接起来,形成闭合回路。 canvas绘图有两种模式:一种是fill,一种是stroke,fill是填充,stroke是描边线,fillstyle与strokeStyle指定绘图样式
例3:路径的演示
<canvas id="can"></canvas>
<script>
var can=document.getElementById("can"); //获得画布元素
//动态设置宽和高
//获取屏幕的可视区域宽与高
var window_w=document.documentElement.clientWidth;
var window_h=document.documentElement.clientHeight;
can.width=window_w;
can.height=window_h;
var content=can.getContext("2d"); //获得2维绘图的上下文
content.lineWidth=8; //设置线宽
content.strokeStyle="pink"; //设置线的颜色
content.moveTo(0,0); //移动画笔到0,0点
content.lineTo(300,300); //画线到300,300的位置
content.stroke(); //执行描边
content.beginPath(); //清空子路径,一般用于开始路径的创建
content.moveTo(300,300);
content.lineTo(0,600);
content.lineTo(600,600);
content.closePath(); //闭合
content.fillStyle="purple"; //设置填充颜色
content.fill(); //执行填充
</script>
运行效果:
-
绘制矩形
context.strokeRect(x,y,width,height):以x,y为左上角,绘制宽度为width,高度为height的矩形; context.fillRect(x,y,width,height):以x,y为左上角,填充宽度为width,高度为height的矩形; context.clearRect(x,y,width,height):清除以x,y为左上角,宽度为width,高度为height的矩形区域
例4:绘制矩形
<canvas id="can"></canvas>
<script>
var can=document.getElementById("can"); //获得画布元素
//动态设置宽和高
//获取屏幕的可视区域宽与高
var window_w=document.documentElement.clientWidth;
var window_h=document.documentElement.clientHeight;
can.width=window_w;
can.height=window_h;
var content=can.getContext("2d"); //获得2维绘图的上下文
content.lineWidth=8; //设置线宽
content.strokeStyle="green";
content.strokeRect(0,0,600,600); //画一个空心的矩形
content.fillStyle="red";
content.fillRect(200,200,200,200); //画一个实心矩形
content.clearRect(250,250,100,100); //清除指定的矩形区域
</script>
运行效果:
-
绘制圆弧
方法:context.arc(x,y,radius,startAngle,endAngle,anticlockwise) 解释:arc方法用来绘制一段圆弧路径;以(x,y)圆心位置radius为半径、startAngle为起始弧度、endAngle为终止弧度,而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定,如果为true就是逆时针,false 则为顺时针,Math.PI * 2 刚好为一周。
例5:绘制圆弧
<canvas id="can"></canvas>
<script>
var can=document.getElementById("can"); //获得画布元素
//动态设置宽和高
//获取屏幕的可视区域宽与高
var window_w=document.documentElement.clientWidth;
var window_h=document.documentElement.clientHeight;
can.width=window_w;
can.height=window_h;
var content=can.getContext("2d"); //获得2维绘图的上下文
//绘制圆弧
content.beginPath();
content.fillStyle="pink";
content.arc(700,350,200,0,Math.PI,true);
content.fill();
content.closePath();
//绘制圆
content.beginPath();
content.fillStyle="orange";
content.arc(700,400,140,0,Math.PI*2,true);
content.fill();
content.closePath();
</script>
运行效果:
例6:添加渐变色
使用addColorStop()
content.beginPath();
var rad=content.createRadialGradient(700,300,50,700,300,200);
//添加渐变色
rad.addColorStop(0,"paleturquoise");
rad.addColorStop(0.2,"lightgreen");
rad.addColorStop(0.4,"plum");
rad.addColorStop(0.6,"lightblue");
rad.addColorStop(0.8,"silver");
rad.addColorStop(1,"pink");
content.fillStyle=rad;
content.arc(700,300,230,0,Math.PI*2,true);
content.fill();
content.closePath();
运行效果:
-
绘制图像
context.drawImage(image,x,y):把image图像绘制到画布上x,y坐标位置; context.drawImage(image,x,y,w,h):把image图像绘制到画布上x,y坐标位置,图像的宽度是w,高度是h; context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):截取image图像以sx,sy为左上角坐标,宽度为sw,高度为sh的一块矩形区域绘制到画布上以dx,dy坐标位置,图像宽度是dw,高度是dh
注:其中image可以是htmlImageElement元素,htmlcanvasElement元素,htmlVideoElement元素
例7:绘制图像
<canvas id="can"></canvas>
<script>
var can=document.getElementById("can"); //获得画布元素
//动态设置宽和高
//获取屏幕的可视区域宽与高
var window_w=document.documentElement.clientWidth;
var window_h=document.documentElement.clientHeight;
can.width=window_w;
can.height=window_h;
var content=can.getContext("2d"); //获得2维绘图的上下文
var img=document.createElement("img");
img.src="./image/my_2.png";
content.lineWidth=6;
content.strokeStyle="blue";
content.strokeRect(500,150,300,300);
content.drawImage(img,0,0,200,200,550,210,200,200);
</script>
运行效果:
-
绘制文字
context.fillText(text,x,y,[maxWidth]):在canvas上填充文字;text表示需要绘制的文字;x,y分别表示绘制在 canvas上的横,纵坐标;最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出; context.strokeText(text,x,y,[maxWidth]):在canvas上描边文字,参数的意义同fillText context.font:设置字体 context.font='italic bolder 48px 黑体';
例8:绘制艺术字
<canvas id="can"></canvas>
<script>
var can=document.getElementById("can"); //获得画布元素
//动态设置宽和高
//获取屏幕的可视区域宽与高
var window_w=document.documentElement.clientWidth;
var window_h=document.documentElement.clientHeight;
can.width=window_w;
can.height=window_h;
var content=can.getContext("2d"); //获得2维绘图的上下文
var rad=content.createRadialGradient(700,200,10,700,200,300);
//添加渐变色
rad.addColorStop(0,"red");
rad.addColorStop(0.1,"blue");
rad.addColorStop(0.2,"green");
rad.addColorStop(0.3,"pink");
rad.addColorStop(0.4,"orange");
rad.addColorStop(0.5,"green");
rad.addColorStop(0.6,"orange");
rad.addColorStop(0.7,"blue");
rad.addColorStop(0.8,"yellow");
rad.addColorStop(0.9,"red");
rad.addColorStop(1,"green");
content.beginPath(); //创建路径
content.font="50px yahei"; //设置字体
content.strokeStyle=rad; //设置描边文字颜色
content.strokeText("Hello World !",400,200,500); //设置描边文字
content.fillStyle=rad; //设置填充文字颜色
content.fillText("Hello World!",800,200,500); //设置填充文字
content.closePath(); //关闭路径
</script>
运行效果: