初探canvas
2015-07-12 14:58
489 查看
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的一些基本操作与其他图形编程工具类似，包含：各种形状的边框、路径绘制和填充，画布属性调整，样式调整等：
一、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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- OpenFileDialog的用法
- ionic返回键双击退出
- Android当中用到的Log和Toast
- 改变XCode的默认设置
- 写代码质量改善java计划151建议——导航开始
- 根据汉语字符串获得对应的拼音字符串或者拼音首字母字符串等操作
- 深度学习之一：概述
- 1001 Exponentiation
- Delphi的in循环
- 【LeetCode 234】Palindrome Linked List
- 光源
- 使用service方式启动rabbitmq-server报错erlexec: HOME must be set
- Windows Azure系列-- 配置Azure Power Shell
- Count Primes -- leetcode
- 各种语言的模块导入导出形式
- 设计模式-创建型模式#单例模式Singleton
- 在MyEclipse安装目录看不完整的目录
- 冒泡排序
- grep使用正则表达式查看与特定主机是否建立链接
- 备份mysq binlog shell