首页 > 编程入门 文章详情

HTML5：Canvas

编程入门 行业动态 更新时间:2024-10-11 21:28:51

HTML5：<a href=https://www.elefans.com/category/jswz/34/1769176.html style=Canvas"/>

HTML5：Canvas

canvas画图已经在JavaScript中介绍了。此处再进行补充。

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" ".dtd">  
<html xmlns="">  
<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.οnmοusedοwn=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" ".dtd">  
<html xmlns="">  
<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" ".dtd">  
<html xmlns="">  
<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");
//路径指定
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" ".dtd">  
<html xmlns="">  
<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" ".dtd">  
<html xmlns="">  
<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" ".dtd">  
<html xmlns="">  
<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" ".dtd">  
<html xmlns="">  
<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" ".dtd">  
<html xmlns="">  
<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" ".dtd">  
<html xmlns="">  
<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" ".dtd">  
<html xmlns="">  
<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" ".dtd">  
<html xmlns="">  
<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" ".dtd">  
<html xmlns="">  
<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>
<html>
<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>
<html><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

本文发布于:2023-06-23 09:32:52，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/847167.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：Canvas

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表