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. 解决JS加载速度慢

    在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...

  2. R语言实战（一）介绍、数据集与图形初阶

    本文对应<R语言实战>前3章,因为里面大部分内容已经比较熟悉,所以在这里只是起一个索引的作用. 第1章       R语言介绍 获取帮助函数 help(), ? 查看函数帮助 exampl ...

  3. Oracle ORA-12154: TNS: 无法解析指定的连接标识符”错误

    主要原因: 1.监听服务没有起起来.windows平台个一如下操作:开始---程序---管理工具---服务,打开服务面板,启动oraclehome92TNSlistener服务. 2.database ...

  4. mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性

    timestamp有两个属性,分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种,使用情况分别如下: 1.CURRENT_TIMESTAMP 当要向 ...

  5. forever让nodejs应用后台执行

    nodejs一般是当成一条用户命令执行的,当用户断开客户连接,运用也就停了,很烦人.如何让nodejs应用当成服务,在后台执行呢? 最简单的办法: $ nohup node app.js & ...

  6. Oculus安装问题

    1.必须FQ,可采用蓝灯,或其他vpn 2.Your computer doesn't meet Rift's recommended specifications 如果某些硬件达不到推荐配置(比如我 ...

  7. [Docker] Docker简介

    一.简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间 ...

  8. 即时聊天IM之四 Android客户端IM帮助类编写

    图文无关一起娱乐: 这一篇我们开始写Android端的Smack版主类,后面Android的IM功能都是通过这个帮助类实现的 引用类库: 因为我用的是IDE是Android Studio,所以我通过g ...

  9. 使用CXF发布WebService

    这里普及一下WebService和cxf的知识.关于webservice和cxf:   WebService.各种提供服务的组件     .企业总线.通讯总线(ESB)CXF:是一个SOA框架,Axi ...

  10. echarts图表第一个案例

    1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...