canvas坐标系
canvas坐标系,从最左上角0,0开始。x向右增大, y向下增大
![](https://img.haomeiwen.com/i13845607/62f3eab99722fe73.png)
2.3.2 设置绘制起点(moveTo)
- 语法:ctx.moveTo(x, y);
- 解释:设置上下文绘制路径的起点。相当于移动画笔到某个位置
- 参数:x,y 都是相对于 canvas盒子的最左上角。
- 注意:绘制线段前必须先设置起点。
2.3.3 绘制直线(lineTo) - 语法:ctx.lineTo(x, y);
- 解释:从x,y的位置绘制一条直线到起点或者上一个线头点。
- 参数:x,y 线头点坐标。
2.3.4 路径开始和闭合 - 开始路径:ctx.beginPath();
- 闭合路径:ctx.closePath();
- 解释:如果是绘制不同状态的线段或者形状,必须使用开始新路径的方法把不同的绘制操作隔开。闭合路径会自动把最后的线头和开始的线头连在一起。
- beginPath: 核心的作用是将 不同绘制的形状进行隔离,
每次执行此方法,表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。
2.3.5 描边(stroke) - 语法:ctx.stroke();
- 解释:根据路径绘制线。路径只是草稿,真正绘制线必须执行stroke
- stroke: (用笔等)画;轻抚;轻挪;敲击;划尾桨;划掉;(打字时)击打键盘
英 [strəʊk] 美 [strok]
canvas绘制的基本步骤:
第一步:获得上下文 =>canvasElem.getContext('2d');
第二步:开始路径规划 =>ctx.beginPath()
第三步:移动起始点 =>ctx.moveTo(x, y)
第四步:绘制线(矩形、圆形、图片...) =>ctx.lineTo(x, y)
第五步:闭合路径 =>ctx.closePath();
第六步:绘制描边 =>ctx.stroke(); ``` html部分:
javascript部分:
//===============基本绘制api==================== //获得画布 var canvas = document.querySelector('#cavsElem'); var ctx = canvas.getContext('2d'); //获得上下文
canvas.width = 900; //设置标签的属性宽高 canvas.height = 600; //千万不要用 canvas.style.height canvas.style.border = "1px solid #000";
//绘制三角形 ctx.beginPath(); //开始路径 ctx.moveTo(100,100); //三角形,左顶点 ctx.lineTo(300, 100); //右顶点 ctx.lineTo(300, 300); //底部的点 ctx.closePath(); //结束路径 ctx.stroke(); //描边路径 ```
综合案例:02绘制定位表格.html
综合案例:03画画板.html
2.3.7 填充(fill)
- 语法:ctx.fill();
- 解释:填充,是将闭合的路径的内容填充具体的颜色。默认黑色。
-
注意:交叉路径的填充问题,“非零环绕原则”,顺逆时针穿插次数决定是否填充。
以下是非0环绕原则的原理:(了解即可,非常少会用到复杂的路径)
“非零环绕规则”是这么来判断有自我交叉情况的路径的:对于路径中的任意给定区域,从该区域内部画一条足够长的线段,
使此线段的终点完全落在路径范围之外。
图2-14中的那三个箭头所描述的就是上面这个步骤。
接下来,将计数器初始化为0,
然后,每当这条线段与路径上的直线或曲线相交时,
就改变计数器的值。如果是与路径的顺时针部分相交,则加1,
如果是与路径的逆时针部分相交,则减1。若计数器的最终值不是0,那么此区域就在路径里面,在调用fill()方法时,
浏览器就会对其进行填充。
如果最终值是0,那么此区域就不在路径内部,浏览器也就不会对其进行填充了。
fill-0-prin.jpg
2.3.8 快速创建矩形rect()方法
- 语法:ctx.rect(x, y, width, height);
- 解释:x, y是矩形左上角坐标, width和height都是以像素计
- rect方法只是规划了矩形的路径,并没有填充和描边。
- 改造案例:04填充矩形.html
*rect: abbr. 矩形(rectangular);收据(receipt)
2.3.9 快速创建描边矩形和填充矩形 - 语法: ctx.strokeRect(x, y, width, height);
- 参数跟2.3.8相同,注意此方法绘制完路径后立即进行stroke绘制
- 语法:ctx.fillRect(x, y, width, height);
- 参数跟2.3.8相同, 此方法执行完成后。立即对当前矩形进行fill填充。
2.3.10 清除矩形(clearRect)
- 参数跟2.3.8相同, 此方法执行完成后。立即对当前矩形进行fill填充。
- 语法:ctx.clearRect(x, y, width, hegiht);
- 解释:清除某个矩形内的绘制的内容,相当于橡皮擦。
2.4 绘制圆形(arc)
概述:arc() 方法创建弧/曲线(用于创建圆或部分圆)。
语法:ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
arc: 弧(度)弧形物;天穹 英 [ɑːk] 美 [ɑrk]
counter 反击,还击;反向移动,对着干;反驳,回答 ['kaʊntə] 美 ['kaʊntɚ]
解释:
x,y:圆心坐标。
r:半径大小。
sAngle:绘制开始的角度。 圆心到最右边点是0度,顺时针方向弧度增大。
eAngel:结束的角度,注意是弧度。π
counterclockwise:是否是逆时针。true是逆时针,false:顺时针
弧度和角度的转换公式: rad = deg*Math.PI/180;
在Math提供的方法中sin、cos等都使用的弧度
![](https://img.haomeiwen.com/i13845607/42496231cb82d735.png)
绘制饼形图:
(function(){
var canvas = document.querySelector( '#cavsElem' );
var ctx = canvas.getContext( '2d' );
canvas.width = 900;
canvas.height = 700;
canvas.style.border = "1px solid #000";
var data = [{
"value": .2,
"color": "red",
"title": "应届生"
},{
"value": .3,
"color": "blue",
"title": "社会招生"
},{
"value": .4,
"color": "green",
"title": "老学员推荐"
},{
"value": .1,
"color": "#ccc",
"title": "公开课"
}];
var tempAngle = -90;//绘制到哪个角度了,起始角度是-90度。
//设置角度的中间变量
var x0 = 400, y0 = 400;
var radius = 200;
// 从-90度开始绘制
for( var i = 0; i < data.length; i++ ) {
ctx.beginPath();//因为设置不同的颜色,所以每次绘制完起一个新状态
ctx.moveTo(x0,y0);
//当前扇形的角度
var angle = data[i].value * 360;
ctx.fillStyle = data[i].color;
//开始从 tempAngle绘制
var startAngle = tempAngle * Math.PI / 180;
//从tempAngle绘制到 我们自己的angle区域
var endAngle = (tempAngle + angle) * Math.PI / 180;
//参数: x0,y0 圆心坐标, radius:半径
// startAngle:开始绘制的弧度
// endAngle:结束绘制的弧度!!
ctx.arc(x0, y0, radius, startAngle, endAngle);
//绘制文字:
var txt = data[i].value * 100 + '%';
var x, y;
// 计算出文字的要放的角度
var txtAngle = tempAngle + 1/2 * angle;
//计算文字的 坐标
x = x0 + Math.cos( txtAngle * Math.PI / 180 ) * (radius + 20);
y = y0 + Math.sin( txtAngle * Math.PI / 180 ) * (radius + 20);
//如果文字在圆形的左侧,那么让文字 对齐方式为 文字结尾对齐当前坐标。
if( txtAngle > 90 && txtAngle < 270 ) {
ctx.textAlign = 'end';
}
//把文字绘制到 扇形区域的 旁边
ctx.fillText(txt, x, y);
ctx.fill();
tempAngle += angle;//下一次绘制的起始角度
}
}());
==============================================================
2.5.1 绘制上下文的文字属性
font 设置或返回文本内容的当前字体属性
font 属性使用的语法与 CSS font 属性相同。 例如:ctx.font = "18px '微软雅黑'";
textAlign 设置或返回文本内容的当前对齐方式
start : 默认。文本在指定的位置开始。
end : 文本在指定的位置结束。
center: 文本的中心被放置在指定的位置。
left : 文本左对齐。
right : 文本右对齐。
例如:ctx.textAlign = 'left';
![](https://img.haomeiwen.com/i13845607/c7c16d762411b412.png)
textBaseline 设置或返回在绘制文本时使用的当前文本基线
alphabetic : 默认。文本基线是普通的字母基线。
top : 文本基线是 em 方框的顶端。。
hanging : 文本基线是悬挂基线。
middle : 文本基线是 em 方框的正中。
ideographic: 文本基线是em基线。
bottom : 文本基线是 em 方框的底端。
例如: ctx.textBaseline = 'top'; 单词: alphabetic: 字母的;照字母次序的 [,ælfə'bɛtɪk] ideographic:表意的;表意字构成的 英 [,ɪdɪəʊ'ɡræfɪk] 美 [,ɪdɪə'græfɪk]
![](https://img.haomeiwen.com/i13845607/d5d367d6986f4bc3.png)
![](https://img.haomeiwen.com/i13845607/c9ff3a00c4912100.png)
Image(img,x,y,width,height);
参数说明:width 绘制图片的宽度, height:绘制图片的高度
如果指定宽高,最好成比例,不然图片会被拉伸</em>
等比公式: toH = Height * toW / Width; //等比
设置高 = 原高度 * 设置宽/ 原宽度;
2.6.3 图片裁剪,并在画布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明:
sx,sy 裁剪的左上角坐标,
swidth:裁剪图片的高度。 sheight:裁剪的高度
其他同上
2.6.4 用JavaScript创建img对象
第一种方式:
var img = document.getElementById("imgId");
第二种方式:
var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后,执行此方法
}
2.6.5 面向对象基础复习补充:
创建对象的方式: var o = { name: '123', age: 18 }; //json方式创建 var o = new Object(); //通过new的方式创建 var o = new Persion(); //通过类的构造函数创建
JS中对象的属性创建方式 json的方式: var o = { age: 19 }; 直接添加属性:var o = {}; o.age = 19;//太分散了,不利于管理 由于js动态语言的特性,如果属性不存在的时候,直接添加属性。 构造函数添加属性 原型添加公共的属性
JS的构造函数的原型 构造函数的原型就是:构造对象的模板,构造函数原型里面的所有的属性和方法都会共享给所有的 构造函数构造出来的所有实。
![](https://img.haomeiwen.com/i13845607/8d55a1c12d979124.png)
网友评论