码迷，mamicode.com
首页 > Web开发 > 详细

HTML5：Canvas

时间：2016-06-12 02:03:06      阅读：262      评论：0      收藏：0      [点我收藏+]

标签：

  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>

技术分享       技术分享

 

 

 

 

 

HTML5：Canvas

标签：

原文地址：http://blog.csdn.net/qq_27626333/article/details/51636967
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！