首页前端开发HTMLhtml5 canvas入门帖

html5 canvas入门帖

时间2024-01-25 13:13:12发布访客分类HTML浏览354
导读：收集整理的这篇文章主要介绍了html5教程-html5 canvas入门帖，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 canvas是html5...
收集整理的这篇文章主要介绍了html5教程-html5 canvas入门帖，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

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

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

AJAXdivHTMLhtml5jQuerypost-format-gallery

若转载请注明出处： html5 canvas入门帖
本文地址： https://pptw.com/jishu/586559.html
hdu 1080 Human Gene Functions 很霸气的DP html5中往矩形中贴图片

游客 回复需填写必要信息
↑