学习:Canvas基本用法
2016-10-18 10:24
309 查看
前言
接触svg一段时间了。慢慢的觉得还是要学习一下canvas(其实是看粒子效果都是canvas,svg上加canvas实现粒子效果,所以没办法懒了)网上的教程不少还是按个人习惯记录一下。MDN中的canvasAPI文档:http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html
教程:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage
Canvas
创建canvas需要创建后再获取才能使用
html:(标准)
<canvas></canvas>
d3:(个人习惯)
var canvas_js = document.getElementById('js'); var canvas_d3 = d3.selectAll("#ceshi").append("canvas");
关于d3
d3.js v4版本支持canvas。目前还在使用v3版本。所以此处用于记录其中的各种问题。上述的d3创建canvas。canvas_d3为d3封装的对象。使用过d3的应该习以为常的使用下列语法,但是canvas中需要注意是不可取的。因为d3_v3不支持canvas~~~
//创建 var canvas_d3 = d3.selectAll("#ceshi").append("canvas"); canvas_d3.width = 200;//报错哦。 //个人解决办法 //1.单个属性 canvas_d3[0][0].width = 200; //2.一劳永逸 var canvas_d3 = >d3.selectAll("#ceshi").append("canvas")[0][0]; canvas_d3.width = 200;
基本API
width( ) && height( )设置宽高
getContext( )
获取画布。专业点的说法就是渲染上下文,通过使用 document.getElementById() 方法来为 元素得到DOM对象。一旦有了元素对象,你可以通过使用它的getContext() 方法来访问绘画上下文。
//js var canvasjs = document.getElementById('js'); canvasjs.getContext('2d'); //d3 var canvasd3 = d3.selectAll("body").append("canvas")[0][0]; canvasd3.getContext("2d");
参数:
‘2d’ :初学嘛。只好2D渲染了。
栅格
画布栅格(canvas grid)太专业了。。。空间坐标和d3一致,默认左上角为原点。
绘制基本图形
矩形
canvas默认支持的图形只有矩形,并提供三种绘制矩形API。
fillRect(x,y,width,height):填充
strokeRect(x,y,width,height)边框
需要注意的是:边框线默认宽度2px;且向边外扩充1px;就是说我在(20,20)处画了一个80*80的边框矩形,但是实际显示区域是(19,19)处起线宽2px,内部79*79的矩形。
clearRect(x,y,width,height)清除
代码
//ctx_js //绘制填充矩形 ctx_js.fillRect(20, 20, 80, 80); //绘制矩形的边框 ctx_js.strokeRect(120, 20, 80, 80); //清除一个矩形区域 ctx_js.clearRect(70, 20, 80, 80); // //ctx_d3 //绘制填充矩形 ctx_d3.fillRect(20, 20, 80, 80); //绘制矩形的边框 ctx_d3.strokeRect(120, 20, 80, 80); //清除一个矩形区域 ctx_d3.clearRect(70, 20, 80, 80);语法基本一致了,之后就不做区别了
绘制路径
基本步骤
beginPath():创建起点
画图命令画出路径
closePath:封闭路径,组合图形时,多个独立路径一定要闭合后再绘制新的路径,或者在路径命令中闭合
fill()或stroke():路径生成后,可以通过描边(stroke)或者填充(fill)来渲染图形
画图命令
**线**lineTo(x,y);
**圆**arc(x,y,radius,startAngle,endAngle,anticlockwise);
**贝塞尔曲线**quadraticCurveTo(cp1x,cp1y,x,y);
Path2D()
路径对象
相关文章推荐
- Canvas 基本用法学习笔记
- ExtJs学习笔记(10)_Window的基本用法
- EXTJS学习系列基础篇:第七篇(转载)作者殷良胜,Ext组件系列之--label组件的基本用法
- Canvas教程 Canvas tutorial之基本用法
- Extjs学习 Window的基本用法
- java学习-JAVA基本排序法示例,JAVA数据类型转换 ,ArrayList用法,Calendar 简单应用
- List Control & Tree Control & CImageCtrl 基本常规用法学习笔记
- Android 2D Graphics学习(二)、Canvas篇1、Canvas基本使用
- Android学习之实现Canvas基本画图方法
- canvas游戏开发学习之八:基本动画
- linux基础学习之mount的基本用法
- EXTJS学习系列基础篇:第八篇(转载)作者殷良胜,Ext组件系列之--textfield组件的基本用法
- VS2005验证控件学习下基本用法
- EXTJS学习系列基础篇:第八篇(转载)作者殷良胜,Ext组件系列之--textfield组件的基本用法
- HTML5 :Canvas之基本用法
- EXTJS学习系列基础篇:第六篇(转载)作者殷良胜,Ext组件系列之--button组件的基本用法
- EXTJS学习系列基础篇:第八篇(转载)作者殷良胜,Ext组件系列之--textfield组件的基本用法
- 【VC++ 中使用ADO操作数据库学习笔记】_ConnectionPtr指针的基本用法
- 【Android组件学习】Spinner的基本用法和Adapter的作用
- ZendFramework学习第三章(核心组件—会话处理之Zend_Session基本用法)