您的位置：首页 > Web前端 > HTML5

HTML5：Canvas

2016-06-11 16:31 585 查看

canvas画图已经在JavaScript中介绍了http://blog.csdn.net/qq_27626333/article/details/51595138。此处再进行补充。

1、颜色的指定方法

颜色指定有3种：第一种是以[#RRGGBB]这种与HTML中相同的颜色指定方法指定颜色。第二种方法为在rgb()中指定三个0~255范围的值；第三种方法是除了指定三个0~255范围的数值外，同时指定透明度（数值范围;0~1）。

context.fillStyle="#FF0000";
context.fillStyle="rgb(255,0,0)";
context.fillStyle="rgba(255,0,0,0.5)";

2、stroke()和fill()方法

stroke()方法绘制路径，fill()方法填充路径。例如：制作一个当用户触摸屏幕时在触摸位置绘制一个三角形的实例程序：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stroke()方法绘制路径</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//设置canvas的onmouse事件
drawing.onmousedown=function(event){
//取得触摸处的坐标
var x=event.x;
var y=event.y;
var r=Math.random()*10+5;
//路径指定
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y+r);
context.lineTo(x+r,y+r);
context.lineTo(x,y);
//绘图
context.strokeStyle="red";
//指定路径线的粗细
context.lineWidth=3;
//绘制路径
context.stroke();
}
}
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fill()方法填充路径</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//路径绘制开始
context.beginPath();
//路径的绘制
context.moveTo(0,0);
context.lineTo(0,100);
context.lineTo(100,100);
//路径绘制结束
context.closePath();
context.fillStyle="rgb(200,0,0)"
context.fill();
}
</script>
</body>
</html>

3、arcTo()方法

arcTo()方法用于绘制圆弧，context.arcTo(x1,y1,x2,y2,半径)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arcTo()方法</title>
</head>
<body>
<canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//设置canvas的onmouse事件
//路径指定
context.beginPath();
//单独使用arcTo()方法必须指定绘图开始的基点
context.moveTo(20,20);
context.arcTo(290,150,20,280,20);
context.lineTo(20,280);
//绘图
context.strokeStyle="red";
//指定路径线的粗细
context.lineWidth=3;
//绘制路径
context.stroke();
}
</script>
</body>
</html>

4、quadraticCurveTo()和bezierCurveTo()方法

quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点。

bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为止，并且以(c1x,c1y)和(c2x,c2y)为控制的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bezierCurveTo()方法</title>
</head>
<body>
<canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//设置canvas的onmouse事件
//路径指定
context.beginPath();
//单独使用bezierCurveTo()方法必须指定绘图开始的基点
context.moveTo(20,20);
context.bezierCurveTo(100,280,180,280,280,20);
//绘图
context.strokeStyle="red";
//指定路径线的粗细
context.lineWidth=3;
//绘制路径
context.stroke();
}
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>quadraticCurveTo()方法</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//设置canvas的onmouse事件
//路径指定
context.beginPath();
//单独使用quadraticCurveTo()方法必须指定绘图开始的基点
context.moveTo(20,20);
context.quadraticCurveTo(40,80,130,150);
//绘图
context.strokeStyle="red";
//指定路径线的粗细
context.lineWidth=3;
//绘制路径
context.stroke();
}
</script>
</body>
</html>

5、createRadialGradient()方法

使用createRadialGradient()方法，这个方法接收6个参数，对应着两个圆的圆心和半径。两个圆的圆心不同时的效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas绘图</title>
</head>
<body>
<canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//设置渐变
var gradient=context.createRadialGradient(30,30,20,170,170,100);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.3,"yellow");
gradient.addColorStop(1,"blue");
//绘制渐变圆形
context.fillStyle=gradient;
context.fillRect(20,20,260,260);
}
</script>
</body>
</html>

6、绘制图像

（1）、直接绘制:context.drawImage(image,dx,dy);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas绘图</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream"  alt="The Scream" width="220" height="250" src="img_the_scream.jpg">
<p>Canvas:</p>
<canvas id="drawing" width="250" height="250" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
var image=document.getElementById("scream");
image.onload = function() {
context.drawImage(image,10,10);
}
}
</script>
</body>
</html>

（2）、尺寸修改：:context.drawImage(image,dx,dy,dw,dh);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas绘图</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream"  alt="The Scream" width="220" height="250" src="img_the_scream.jpg">
<p>Canvas:</p>
<canvas id="drawing" width="250" height="250" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
var image=document.getElementById("scream");
image.onload = function() {
context.drawImage(image,10,10,100,100);
}
}
</script>
</body>
</html>

（3）、图像截取：:context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas绘图</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream"  alt="The Scream" width="220" height="250" src="img_the_scream.jpg">
<p>Canvas:</p>
<canvas id="drawing" width="250" height="250" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
var image=document.getElementById("scream");
image.onload = function() {
context.drawImage(image,20,20,70,100,10,10,220,250);
}
}
</script>
</body>
</html>

7、绘制数据图表

（1）、绘制方格图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas绘图</title>
</head>
<body>
<canvas id="drawing" width="250" height="250" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//描绘背景
var gradient=context.createLinearGradient(0,0,0,300);
gradient.addColorStop(0,"#e0e0e0");
gradient.addColorStop(1,"#ffffff");
context.fillStyle=gradient;
context.fillRect(0,0,drawing.width,drawing.height);
//描绘边框
var grid_cols=10;
var grid_rows=10;
var cell_height=drawing.height/grid_rows;
var cell_width=drawing.width/grid_cols;
context.lineWidth=1;
context.strokeStyle="#a0a0a0";
//开始边框描绘
context.beginPath();
//准备画横线
for(var row=0;row<=grid_rows;row++){
var y=row*cell_height;
context.moveTo(0,y);
context.lineTo(drawing.width,y);
}
//准备画竖线
for(var col=0;col<=grid_cols;col++){
var x=col*cell_width;
context.moveTo(x,0);
context.lineTo(x,drawing.height);
}
//完成描述
context.stroke();
}
</script>
</body>
</html>

（2）、数据表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas绘图</title>
</head>
<body>
<canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
//定义图表数据
var uriage=[80,92,104,110,68,50,45,90,74,68,98,103];
drawChart(uriage);
//绘制折线数据图表的函数
function drawChart(data){
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//描绘背景
var gradient=context.createLinearGradient(0,0,0,300);
gradient.addColorStop(0,"#e0e0e0");
gradient.addColorStop(1,"#ffffff");
context.fillStyle=gradient;
context.fillRect(0,0,drawing.width,drawing.height);
//描绘边框
var grid_cols=data.length+1;
var grid_rows=4;
var cell_height=drawing.height/grid_rows;
var cell_width=drawing.width/grid_cols;
context.lineWidth=1;
context.strokeStyle="#a0a0a0";
//开始边框描绘
context.beginPath();
//准备画横线
for(var row=0;row<=grid_rows;row++){
var y=row*cell_height;
context.moveTo(0,y);
context.lineTo(drawing.width,y);
}
//准备画竖线
for(var col=0;col<=grid_cols;col++){
var x=col*cell_width;
context.moveTo(x,0);
context.lineTo(x,drawing.height);
}
//完成描述
context.stroke();
context.closePath();
//获取数据中最大的值
var max_v=0;
for(var i=0;i<data.length;i++){
if(data[i]>max_v)
max_v=data[i];
}
//为了能让最大值能容纳在图表内，计算坐标
max_v=max_v*1.1;
//将数据换算为坐标
var points=[];
for(var i=0;i<data.length;i++){
var v=data[i];
var px=cell_width*(i+1);
var py=drawing.height-drawing.height*(v/max_v);
points.push({"x":px,"y":py});
}
//描绘折线图
context.beginPath();
context.moveTo(points[0].x,points[0].y);
for(var i=1;i<points.length;i++){
context.lineTo(points[i].x,points[i].y);
}
context.lineWidth=2;
context.strokeStyle="#ee0000";
context.stroke();
//绘制坐标图形（坐标对应一红色圆圈）
for(var i in points){
var p=points[i];
context.beginPath();
context.arc(p.x,p.y,6,0,2*Math.PI);
context.fillStyle="#ee0000";
context.fill();
}
}
}
</script>
</body>
</html>

8、移动与扩大/缩小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas绘图</title>
</head>
<body>
<canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
function drawRect(context,color){
context.fillStyle=color;
context.fillRect(20,20,50,50);
}
//绘制普通的矩形
drawRect(context,"red");
//移动矩形以及扩大/缩小矩形
context.translate(30,30);//平行移动
context.scale(2.5,0.8);//长扩大2.5倍、宽缩小至0.8倍
drawRect(context,"blue");//绘制移动、扩大/缩小后的矩形
}
</script>
</body>
</html>

9、canvas实现动画效果

（1）、圆球跳动的动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas绘图</title>
</head>
<body>
<canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//记录圆球的状态
var ball={x:10,y:100,dir_x:5,dir_y:5};
//动画
setInterval(drawBall,100);
function drawBall(){
//绘制背景
context.fillStyle="#F5F5F5"
context.fillRect(0,0,300,300);
//绘制圆球
context.beginPath();
context.arc(ball.x,ball.y,5,0,2*Math.PI);
context.fillStyle="blue";
context.fill();
//让圆球动起来
ball.x+=ball.dir_x;
ball.y+=ball.dir_y;
if(ball.x<0||ball.x>300){ball.dir_x*=-1;}
if(ball.y<0||ball.y>300){ball.dir_y*=-1;}

}
}
</script>
</body>
</html>

（2）待机动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas绘图</title>
</head>
<body>
<canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas>
<script>
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
var context=drawing.getContext("2d");
//动画绘制开始
var ci=0;
anim();
//定义动画函数
function anim(){
context.clearRect(0,0,300,300);//清空canvas
//循环绘制36根长方形棒棒
for(var i=0;i<36;i++){
context.save();
//旋转
var r=(i*10)*Math.PI/180;//度转换为弧度
context.translate(150,150);//移动中心店
context.rotate(r);
//绘制细长方形
if(i==ci){
context.globalAlpha=1.0;//设置透明度
}else{
context.globalAlpha=0.3;
}
context.beginPath();
context.fillStyle="green";
context.rect(0,0,50,6);
context.fill();
context.restore();
}
ci=(ci+1)%36;
//每隔20微秒调用函数本身，实现动画效果。
setTimeout(anim,20);
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航