HTML5之canvas基本API介绍及应用 1
2013-07-28 11:55
465 查看
一、canvas的API:
1、颜色、样式和阴影:
![](http://images.cnitblog.com/blog/502866/201307/28113243-eea4d62ff8324a1bb732cbea5560b13e.jpg)
2、线条样式属性和方法:
![](http://images.cnitblog.com/blog/502866/201307/28113358-5aa6b53d167f4e8ba6d83476ac24e9bc.jpg)
3、路径方法:
![](http://images.cnitblog.com/blog/502866/201307/28113515-6f2c97b3141145d1ab7b76e2b97a226c.jpg)
4、转换方法:
![](http://images.cnitblog.com/blog/502866/201307/28113700-41e7b7b89e3e4133bdf19482b1888664.jpg)
5、文本属性和方法:
![](http://images.cnitblog.com/blog/502866/201307/28113757-31cd15df817e4108a2da5ba8bbc7dac8.jpg)
6、像素操作方法和属性:
![](http://images.cnitblog.com/blog/502866/201307/28114049-d5498f92c44a4fc2a02ea9bfed9ec47e.jpg)
7、其他:
drawImage:向画布上绘制图像、画布或视频 chrome不支持
globalAlpha:设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation:设置或返回新图像如何绘制到已有的图像上
二、代码示例:
1、颜色、样式和阴影:
![](http://images.cnitblog.com/blog/502866/201307/28113243-eea4d62ff8324a1bb732cbea5560b13e.jpg)
2、线条样式属性和方法:
![](http://images.cnitblog.com/blog/502866/201307/28113358-5aa6b53d167f4e8ba6d83476ac24e9bc.jpg)
3、路径方法:
![](http://images.cnitblog.com/blog/502866/201307/28113515-6f2c97b3141145d1ab7b76e2b97a226c.jpg)
4、转换方法:
![](http://images.cnitblog.com/blog/502866/201307/28113700-41e7b7b89e3e4133bdf19482b1888664.jpg)
5、文本属性和方法:
![](http://images.cnitblog.com/blog/502866/201307/28113757-31cd15df817e4108a2da5ba8bbc7dac8.jpg)
6、像素操作方法和属性:
![](http://images.cnitblog.com/blog/502866/201307/28114049-d5498f92c44a4fc2a02ea9bfed9ec47e.jpg)
7、其他:
drawImage:向画布上绘制图像、画布或视频 chrome不支持
globalAlpha:设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation:设置或返回新图像如何绘制到已有的图像上
二、代码示例:
<!doctype html> <html> <head></head> <body> <canvas width="500" height="800" style="background:yellow" id="canvas"> 您的浏览器当前版本不支持canvas标签 </canvas> <script> //获取画布DOM 还不可以操作 var canvas=document.getElementById('canvas'); //alert(canvas); //设置绘图环境 var cxt=canvas.getContext('2d'); //alert(cxt); //画一条线段。 //开启新路径 cxt.beginPath(); //设定画笔的宽度 cxt.lineWidth=10; //设置画笔的颜色 cxt.strokeStyle="#ff9900"; //设定笔触的位置 cxt.moveTo(20,20); //设置移动的方式 cxt.lineTo(100,20); //画线 cxt.stroke(); //封闭路径 cxt.closePath(); //画一个空心圆形 凡是路径图形必须先开始路径,画完图之后必须结束路径 //开始新路径 cxt.beginPath(); //重新设置画笔 cxt.lineWidth=3; cxt.strokeStyle="green"; cxt.arc(200,200,50,0,360,false);//x坐标,y坐标,半径,起始角度,结束角度 cxt.stroke(); //封闭新路径 cxt.closePath(); //画一个实心圆形 cxt.beginPath(); //设置填充的颜色 cxt.fillStyle="rgb(255,0,0)"; cxt.arc(200,100,50,0,360,false); cxt.fill(); cxt.stroke(); cxt.closePath(); //画一个矩形 cxt.beginPath(); cxt.rect(300,20,100,100);//x坐标,y坐标,长,宽 cxt.stroke(); cxt.closePath(); //其他方法 建议使用此方式 cxt.strokeRect(300,150,100,100) //实心矩形 cxt.beginPath(); cxt.rect(300,270,100,100); cxt.fill(); cxt.closePath(); //其他方法 建议使用此方式 cxt.fillRect(300,390,100,100); //设置文字 cxt.font="40px 宋体";//css font属性 cxt.fillText("无兄弟,不编程",20,300); //将笔触设置为1像素 cxt.lineWidth=1; cxt.strokeText("无兄弟,不编程",20,350); //画图 把一幅图片画到画布中 注意webkit内核的浏览器 chrome和猎豹不支持 var img =new Image(); img.src="xiaomm.jpg"; cxt.drawImage(img,20,370,230,306);//图片对象,x坐标,y坐标,后面两个参数设置图片显示的宽度和高度 //画一个三角形 cxt.beginPath(); //移动至开始点 cxt.moveTo(300,500); cxt.lineTo(300,600); cxt.lineTo(400,550); cxt.closePath();//填充或者画路径需要先闭合路径再画 cxt.stroke(); //实心三角形 cxt.beginPath(); //移动至开始点 cxt.moveTo(300,600); cxt.lineTo(300,700); cxt.lineTo(400,650); cxt.closePath(); cxt.fill(); //旋转图片 //设置旋转环境 cxt.save(); //在异次元空间重置0,0点的位置 cxt.translate(20,20); //图片/形状旋转 //设置旋转角度 参数是弧度 角度 0-360 弧度=角度*Math.PI/180 cxt.rotate(-30*Math.PI/180); //旋转一个线段 cxt.lineWidth=10; cxt.beginPath(); cxt.moveTo(0,0); cxt.lineTo(20,100); cxt.stroke(); cxt.closePath(); //将旋转之后的元素放回原画布 cxt.restore(); //过程不可颠倒 先设置00点在旋转角度,然后画图 //旋转小萌萌 cxt.save(); cxt.translate(20,370); cxt.rotate(-10*Math.PI/180); var img =new Image(); img.src="xiaomm.jpg"; cxt.drawImage(img,0,0,230,306); cxt.restore(); </script> </body> </html>
相关文章推荐
- HTML5之canvas基本API介绍及应用 1
- 浅谈HTML5中的Canvas基本绘图API简易封装和使用(一)
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- Canvas的基本使用——常用的Api方法介绍(二)
- HTML5——Canvas基本介绍
- html5-canvas常用的api介绍
- html5中canvas基本应用
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- RevitAPI之FilteredElementCollector的基本应用
- FileNet P8 工作流生命周期管理和 Process Engine API 应用介绍
- 使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
- Servlet第五篇【介绍会话技术、Cookie的API、详解、应用】
- HTML5 canvas热点图应用
- DNS基本介绍及应用软件bind9编译安装
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- HTML5 postMessage 和 onmessage API 详细应用
- HTML5全屏(Fullscreen)API详细介绍
- html5中表格的各种属性以及应用详细介绍
- HTML5 Canvas像素处理使用接口介绍