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="http://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>

初探canvas的更多相关文章

  1. canvas初探3：画方画圆

    绘制矩形的方法,strokeRect().fillRect()及clearRect(). 方法 描述 strokeRect(double x,double y,double w,double h) 使 ...

  2. canvas初探2

    2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...

  3. canvas初探1

    刚申请的博客,当然这也是第一篇.对于canvas也是刚开始着手进行学习,有哪些不对的地方,还望看到本篇博文的朋友指正. 1.canvas的历史 首先,它是HTML5的一个标签. 它是为了客户端矢量图形 ...

  4. Canvas标签初探

    学了一点基础知识,感觉好神奇,全部练习代码 <html> <head> <meta http-equiv=Content-Type content="text/ ...

  5. 初探Javascript之Canvas

    什么是Canvas <canvas>是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形. canvas是一个矩形区域,您可以控制其每一像素. 引入Canvas ```ht ...

  6. HTML5 Canvas 初探

    仅仅只是一个简单的hello world. js代码很简单: <!DOCTYPE HTML> <html lang="cn"> <head> & ...

  7. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  8. Android中滑屏初探 ---- scrollTo 以及 scrollBy方法使用说明

    今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与 scrollBy这两个函数的区别 . 首先 ,我们必须明白在Android ...

  9. Android中Canvas绘图基础详解（附源码下载） (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

随机推荐

  1. Sublime Text 3 支持的热门插件推荐(转载)

    SublimeText是一款非常精巧的文本编辑器,适合编写代码.做笔记.写文章.它用户界面十分整洁,功能非同凡响,性能快得出奇.这些非常棒的特性 包括任意跳转(Goto Anything).多重选择( ...

  2. c++11 function bind 测试。

    实验小结 1)function 是一个模板类.有函数指针成员.可以看作安全型函数指针. template<typename _Res, typename... _ArgTypes> cla ...

  3. python成长之路【第十篇】：浅析python select模块

    一.select介绍 select()的机制中提供一fd_set的数据结构,实际上是一long类型的数组, 每一个数组元素都能与一打开的文件句柄(不管是Socket句柄,还是其他文件或命名管道或设备句 ...

  4. ASP.NET 页面间传递参数的方法

    http://www.cnblogs.com/eoiioe/archive/2008/04/08/1142247.html

  5. offsetwidth/clientwidth的区别

    clientWidth是对象看到的宽度(不含边线,即border)scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右pad ...

  6. [ubunut]打造Ubuntu下Java开发环境 (转)

    http://www.cnblogs.com/wufengtinghai/p/4542366.html 遇到困难: A Java Runtime Environment (JRE) or Java D ...

  7. git 使用 总结

    比较好的教程 http://backlogtool.com/git-guide/cn/intro/intro1_2.html 1.git流程图 2.git 新建仓库 git init git clon ...

  8. 如何修改file控件

    在移动web开发过程中,常常会用到input file这控件,但css不能修改其样式往往让开发者很头疼,直接把他放到页面上又不美观: 下面介绍的方法,可以将该控件的显示样式替换成一个图标:   该方法 ...

  9. 网站整站下载工具—HTTrack Website Copier

    HTTrack是一个免费和易用的离线浏览工具(浏览器),它可以允许你下载整个WWW网站至本地目录,并且通过遍历网站目录获取HTML,图片和其他文件,是安全渗透测试和居家旅行必备软件. WinHTTra ...

  10. C#webform LinQ

    LinQ的高级查询: 模糊查 con.Car.Where(r=>r.Name.Contains(cname)).ToList(); 以..开头 con.car.Where(r => r.n ...