当前位置： 移动技术网 > IT编程>网页制作>Html5 > html5 canvas入门帖

html5 canvas入门帖

2018年04月04日  | 移动技术网IT编程  | 我要评论

canvas是html5新增的一个专用于图形处理的标签，利用canvas可以实现大部分图形操作
canvas的一些基本操作与其他图形编程工具类似，包含：各种形状的边框、路径绘制和填充，画布属性调整，样式调整等
下面逐步引入，笔者叙述的尽量详细，争取让一个新手能轻松理解
一、canvas环境构建
进入html编辑环境即可。
在body中添加canvas标签
[html] 
<body> 
<canvas id="canvas1" width="400px" height="200px"></canvas><br /> 
</body> 
这样就完成了一个canvas的铺设,但这样是远远不够的，在运用canvas之前还必须做一些工作，包括变量关联和上下文的创建
[html]
$(document).ready( 
function(){ 
    var canvas=$("#canvas1"); //变量关联 
    var context=canvas.get(0).getContext("2d"); //创建上下文 
    context.clearRect(0,0,400,200); //画矩形 
<span style="white-space:pre">  </span>} 
); 
二、画图的方法有多种，几种典型方法如下
[html]
context.fillRect(20,20,100,100);  //填充 
context.strokeRect(130,20,100,100);  //边框 
[html] 
<span style="white-space:pre">  </span>context.beginPath(); 
    context.strokeRect(30,100,50,50);//勾画路径 
    context.closePath(); 
    context.stroke();//路径的使用方式 
[html] 
<span style="white-space:pre">  </span>context.beginPath(); 
    context.arc(155,125,20,0,Math.PI*1.5,false);//画圆（扇） 
    //context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针) 
    context.closePath(); 
    context.fillStyle="#ffff00";//调整样式 
    context.fill(); 
[html]
<span style="white-space:pre">  </span>var text="hello world!"; 
    context.font="35px italic serif";//设置字体属性 
    context.fillText(text,60,100); 
[html] 
<span style="white-space:pre">  </span>canvas.attr("width",400);//修改画布大小 
    canvas.attr("height",20); 
[html] 
context.clearRect(0,0,canvas.width(),canvas.height());//修改画布大小 
三、实例，下面提供一个完整的各种canvas基础应用的demo源码
[html] 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<title>canvas简明教程（一）</title> 
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> 
<script language="javascript"> 
$(document).ready( 
function(){ 
    init(); 
} 
); 
function clear1(){ 
    var canvas=$("#canvas1"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    context.clearRect(0,0,400,200); 
} 
function clear2(){ 
    var canvas=$("#canvas2"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    context.clearRect(0,0,400,200); 
} 
function clear3(){ 
    var canvas=$("#canvas3"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    context.clearRect(0,0,400,200); 
} 
function clear4(){ 
    var canvas=$("#canvas4"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    context.clearRect(0,0,canvas.width(),canvas.height()); 
} 
function clear5(){ 
    var canvas=$("#canvas5"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    canvas.attr("width",$(window).get(0).innerWidth); 
    canvas.attr("height",$(window).get(0).innerHeight); 
    context.fillRect(0,0,canvas.width(),canvas.height()); 
} 
function init(){ 
    var canvas=$("#canvas1"); //变量关联 
    var context=canvas.get(0).getContext("2d"); //创建上下文，学过MFC图形处理的应该很熟悉，即在内存中创建一个相匹配的环境  
    context.fillRect(20,20,100,100); 
    context.strokeRect(130,20,100,100); 
     
    canvas=$("#canvas2"); 
    var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素 
    context.beginPath(); 
    context.moveTo(30,30); 
    context.lineTo(300,60); 
    context.closePath(); 
    context.stroke(); 
    context.beginPath(); 
    context.strokeRect(30,100,50,50); 
    context.closePath(); 
    context.stroke(); //这个stroke是笔的意思，只绘制 
    context.beginPath(); 
    context.arc(155,125,20,0,Math.PI*1.5,false); 
    //context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针) 
    context.closePath(); 
    context.fill();//这个fill是全填充 
     
    canvas=$("#canvas3"); 
    var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素 
    context.lineWidth=5; 
    context.strokeStyle="#ff0000"; //一经改变永久生效 
    context.beginPath(); 
    context.strokeRect(30,100,50,50); 
    context.closePath(); 
    context.stroke(); //这个stroke是笔的意思，只绘制 
    context.beginPath(); 
    context.arc(155,125,20,0,Math.PI*1.5,false); 
    //context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针) 
    context.closePath(); 
    context.fillStyle="#ffff00"; 
    context.fill();//这个fill是全填充 
     
    canvas=$("#canvas4"); 
    var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素 
    var text="hello world!"; 
    context.font="35px italic serif"; 
    context.fillText(text,60,100); 
     
    canvas=$("#canvas5"); 
    var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素 
    canvas.attr("width",400); 
    canvas.attr("height",20); 
} 
</script> 
<style> 
body { margin:0 auto;} 
canvas {border:red 1px dashed;} 
</style> 
</head> 
<body> 
<input type="button" onClick="init()" value="点击全部重绘" /> 
<h6>canvas 1 矩形绘制：</h6> 
<canvas id="canvas1" width="400px" height="200px"></canvas><br /> 
<input type="button" onClick="clear1()" value="点击擦掉" /> 
<h6>canvas 2 路径绘制：</h6> 
<canvas id="canvas2" width="400px" height="200px"></canvas><br /> 
<input type="button" onClick="clear2()" value="点击擦掉" /> 
<h6>canvas 3 颜色和线宽调整：</h6> 
<canvas id="canvas3" width="400px" height="200px"></canvas><br /> 
<input type="button" onClick="clear3()" value="点击擦掉" /> 
<h6>canvas 4 文本绘制：</h6> 
<canvas id="canvas4" width="400px" height="200px"></canvas><br /> 
<input type="button" onClick="clear4()" value="点击擦掉" /> 
<h6>canvas 5 测试改动一个canva属性值并抹黑</h6> 
<canvas id="canvas5" width="400px" height="20px"></canvas><br /> 
<input type="button" onClick="clear5()" value="点击变大并抹黑" /> 
<br /><br /> 
<input type="button" onClick="init()" value="点击全部重绘" /> 
 
</body> 
</html> 

 作者：goodcat12

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网