好程序员分享24个canvas基础知识小结 1
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家。
现把canvas的知识点总结如下,以便随时查阅。
1、填充矩形 fillRect(x,y,width,height);
2、绘制矩形边框 strokeRect(x,y,width,height);
3、擦除矩形 clearRect(x,y,width,height);
4、填充样式 fillStyle="red"; 样式可以为颜色、渐变和图像。
5、描边样式 strokeStyle="red";
6、描边线条的宽度 lineWidth=4;
7、线条末端形状 lineCap="butt"; butt(对接)/round(圆)/square(方),默认情况下是butt;
8、线条相交样式 lineJoin="miter"; miter(尖角)/round(圆角)/bevel(斜角),默认尖角;
9、开始绘制路径 beginPath();
10、结束路径 closePath(); 创建路径后,如果想绘制一条连接到路径起点的线条,可以调用closePath();
11、绘制圆弧 arc(x,y,radius,startAngle,endAngle,true/false);
12、绘制弧线 arcTo(x1,y1,x2,y2,radius) 从上一点开始绘制一天弧线,到x2,y2为止,并且以给定的半径radius穿过x1,y1;
13、moveTO(x,y); 将绘图游标移动到(x,y),不画线
14、lineTo(x,y); 从上一点开始绘制一条直线
15、二次贝塞尔曲线: quadraticCurveTo(cx,cy,x,y); 从上一点开始绘制二次曲线,到x,y为止,cx,cy作为控制点。
16、三次贝塞尔曲线: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 从上一点开始绘制二次曲线,到x,y为止,cx1,cy1和cx2,cy2作为控制点。
17、rect(x,y,width,height);从点x,y开始绘制矩形,宽度和高度分别由width和height指定。这个方法绘制的是矩形路径,而不是独立形状。
18、绘制文本:
(1) 填充文本:fillText("hello",x,y,width);width为可选的最大像素宽度,如果文本大于最大宽度,则文本会收缩以适应最大宽度。
(2) 文本描边:strokeText("hello",x,y,width);width为可选的最大像素宽度。
(3) 文本样式:font="bold 14px Arial";
(4) 水平文本对齐:textAlign='start'; // start, end, left,right, center。默认值:start。以文字的起始点(x,y)为基点的纵轴进行对齐。
(5) 垂直文本对齐:textBaseline='alphabetic'; //top, hanging, middle,alphabetic, ideographic, bottom。
默认值:alphabetic。以文字的起始点(x,y)为基点的横轴进行对齐。
(6) 文本的宽度:var text="hello"; var length=context.measureText(text);参数text为所需要绘制的文字
19、变换
(1) rotate(angle):围绕原点旋转图像angle弧度。
(2) scale(x,y):缩放图像。也可以使用transform(x,0,0,y,0,0);
(3) translate(x,y):将坐标原点移动到x,y,执行这个变换之后,坐标0,0会变成之前由x,y表示的点。
(4) transform(, , ,,x, y);
(5) setTransform(, , ,,x, y);将变换矩阵重置为默认状态,然后再调用transform();
20、图形组合
代码如下:
context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; 可选值如/ /内。
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
source-over(默认值):
destination-over:在原有图形之下绘制新图形
source-in:新图形与原有图形作in运算,只显示新图形中与原有图形相重叠的部分
destination-in:原有图形与新图形作in运算,只显示新图形中与原有图形相重叠的部分
source-out:新图形与原有图形作out运算,只显示新图形中与原有图形不重叠的部分
destination-out:新图形与原有图形作out运算,只显示新图形中与原有图形不重叠的部分
source-atop:只绘制新图形中与原有图形重叠的部分和未被重叠的原有图形
destination-atop:只绘制原有图形中被新图形重叠的部分和新图形的其他部分
lighter:原有图形与新图形均绘制,重叠部分做加色处理
xor:只绘制新图形与原有图形不重叠的部分,重叠部分变透明
copy:只绘制新图形
*/
21、绘制图形阴影
代码如下:
context.shadowOffsetX=10; //阴影的横向位移量
context.shadowOffsetY=10; //阴影的纵向位移量
context.shadowColor='rgba(100,100,100,0.5)'; //阴影的颜色
context.shadowBlur=7; //阴影的模糊范围
22、绘制、平铺、裁剪图像
代码如下:
context.drawImage(image,x,y);
context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx,sy和sw,sh为源图像的被复制区域的起始坐标和高度,dx,dy和dw,dh为复制后的区域的目标坐标和高度。
context.createPattern(image,type);图像平铺,参数可以为:no-repeat,repeat-x,repeat-y,repeat;
context.clip(); //裁剪功能
例子:
代码如下:
image=new Image(); //创建Image对象
image.src="../images/wukong.gif";
var test=context.createPattern(image,'repeat-y');//createPattern设置平铺效果,
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.οnlοad=function() { //此方法的作用是,如果图片是比较大的网络图像文件,防止图像全部装载完毕才看见该图像,这样就可以一边装载一边绘制了。
drawImg(context,image);
}
function drawImg(context,image){
//绘制原始图像
context.drawImage(image,10,10,125,125);
//局部放大
context.drawImage(image,20,0,90,100,150,10,125,125);
context.rect(20,20,80,80);
context.clip();
context.drawImage(image,0,0,200,200);
}
23、保存、恢复
contex.save();将当前状态保存到栈中。注意:保存的只是对绘制图形的设置和变换,不会保存绘制图形的内容。
context.restore();从栈中取出之前保存的图形状态
可以应用的场合:
(1)图像或图形变形
(2)图像裁剪
24、线性渐变
代码如下:
var g=context.createLinearGradient(xStart,yStart,xEnd,yEnd);
var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);
g.addColorStop(0,'red');
g.addColorStop(0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);
好程序员分享24个canvas基础知识小结 1相关推荐
- 好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
- 软考 程序员教程-第一章 计算机系统基础知识
软考 程序员教程-第一章 计算机系统基础知识 为了督促自己学习,告别懒惰,在此先给自己定个小目标,请大家监督哟! 目标:一个月内过一遍<程序员教程>,下一个月开始上真题. 简单看了下,我在 ...
- 软考 程序员教程-第二章 操作系统基础知识
软考 程序员教程-第二章 操作系统基础知识 第二章 操作系统基础知识 2.1.操作系统概述(第四版教程P44) 操作系统的4个特征:并发性.共享性.虚拟性.不确定性. 操作系统的5个功能:处理机管理. ...
- unicode 编码转换漏洞_好程序员Python教程之字符串编码知识小结
好程序员Python教程之字符串编码知识小结,提及Python字符串,你会想到什么?是ASCII,还是Unicode?他们之间是如何转换的?字符串编码和字符串有什么区别?接下来好程序员Python教程 ...
- python编码转换语句_好程序员Python教程之字符串编码知识小结
好程序员Python教程之字符串编码知识小结,提及Python字符串,你会想到什么?是ASCII,还是Unicode?他们之间是如何转换的?字符串编码和字符串有什么区别?接下来好程序员Python教程 ...
- 程序员必会的核心基础知识:1张导图+10本书
▲点击可查看大图 一年一度的秋招即将拉开序幕,程序员"金九银十"跳槽季也接踵而至.大部分互联网公司都会进行基础知识的考察,基础知识的重要性不言而喻. 计算机基础知识对程序员来说为什 ...
- 非科班的java程序员该如何补充计算机基础知识,需要看哪些书?
java比较特殊,毕竟后端扛霸子,想要认真学好java,必须有好的计算机基础,可是为什么需要基础呢? 把这个问题弄明白,要学哪些基础知识就清楚多了. 第一个问题,10个用户使用的系统和1000000个 ...
- 前端程序员容易忽视的一些基础知识
基础数据结构与算法 现在有两个不同的JSON,比较复杂,可以参考这里的DEMO中返回的JSON.要比较它们的差异,除了用现成的工具如 beyond compare 以外,如果我们的机器上没有安装这个工 ...
- 程序员教程-1章-计算机系统基础知识
觉得自己看第一章看了很长时间,才看了二.三十页,而且也是稀里糊涂的,先记下吧.(补记:稀里糊涂看完了,这章只考选择题,也就没深入了解,其实是了解一下头就大) 先记录一下目录结构,方便以后回忆内容. 本 ...
最新文章
- 推翻《Nature》:生命不息,神经发生不止...
- vue2 + vue-router + vuex + iview 入门项目
- Tensor for ‘out‘ is on CPU, Tensor for argument #1 ‘self‘ is on CPU
- echarts 表格与 div 之间 空白的设置
- 网络库urillib3
- Java高并发系统的限流策略
- suse linux 11如何分区,新手发帖,关于SUSE11挂载磁盘阵列并分区的问题
- TIM怎么更新版本 TIM检查更新版本教程
- MathSystem
- sed for windows 双引号内部内容的替换
- 一个失败软件项目的思考
- sqlyog简单入门使用
- 15 行 Java 代码实现一个标准输出的进度条,其中的知识点你知道但并不一定会用...
- 银行服务器linux系统,银行操作系统
- ROS学习【3】-----ROS通信编程:小乌龟走正方形
- onethink钩子
- STP的BPDU报文类型
- 1bit和1byte_Bit和Byte的区别及单位换算
- 从 Uber 数据泄露事件我们可以学到什么?
- python中的date的含义_浅谈python中的dateime
热门文章
- 8202v/8202ka/8202kd/8202rd 无线游戏手柄方案
- SpringBoot实战(十六):集成Skywalking调用链监控系统
- 还没买到票?快试试这个Python开源工具,支持多任务抢票
- Google大调整:搜索与AI分家独立,原SVP引退,Jeff Dean终掌大权
- 只需修改一个像素,让神经网络连猫都认不出 | 论文+代码
- 如何用sklearn创建机器学习分类器?这里有一份上手指南
- 无人车是怎样一步步学会开车的? | 自动驾驶科普
- 叮铃哐当,一大波机器人开始入侵厨房
- ylbtech-Bill(发票管理)-数据库设计
- 使用librtmp进行H264与AAC直播