读javascript高级程序设计04-canvas
一、基本用法
1.要使用canvas元素,需要先给定其width和height来设置绘图区域的大小。canvas中间的文本会在浏览器不支持canvas的情况下显示出来。
<canvas width="1500px" height="1500px" id='drawing'>do not support.</canvas>
2.绘图上下文:
要在canvas绘图,需要通过getContext方法来获取上下文。传入参数“2d”,就可以获取2d上下文。在调用getContext方法之前要先判断一下该方法是否存在。
![](/assets/blank.gif)
var drawing=document.getElementById("drawing"); if(drawing.getContext){//判断方法是否存在var context=drawing.getContext('2d');//创建上下文 }
![](/assets/blank.gif)
二、常用2D上下文绘图方法
1.填充矩形:
使用指定的颜色、图片等对图形进行填充。
- fillStyle:可以是字符串、渐变对象、模式对象等,用来设置填充区域的效果;
- fillRect(x,y,w,d):在画布上填充指定的矩形区域,效果使用fillStyle中的设定。方法有四个参数:x坐标、y坐标、宽度、高度。
- clearRect(x,y,w,d):清除画布上的指定区域。方法有四个参数:x坐标、y坐标、宽度、高度。
![](/assets/blank.gif)
//绘制红色矩形 context.fillStyle="red"; context.fillRect(10,10,50,50); //绘制蓝色半透明举行 context.fillStyle="rgba(0,0,255,0.5)"; context.fillRect(30,30,50,50); //清除中间小矩形块 context.clearRect(35,40,10,10);
![](/assets/blank.gif)
运行效果:
2.绘制矩形
- lineWidth:设置边框线条的宽度;
- lineJoin:设置图形的线条相交处是round、bevel、mitel;
- shadowColor:用CSS颜色设置阴影颜色;
- shadowOffsetX:形状或阴影X轴方向偏移值,默认为0;
- shadowOffsetY:形状或阴影X轴方向偏移值,默认为0;
- shadowBlur:模糊的像素数,默认为0。
![](/assets/blank.gif)
//边框宽度context.lineWidth=10; //设置阴影 context.shadowOffsetX=5; context.shadowOffsetY=5;ontext.shadowColor="rgba(0,0,0,0.5)"; context.shadowBlur=4; //线条拐角处 context.lineJoin="round"; //绘制红色矩形context.strokeStyle="red"; context.strokeRect(10,100,100,100); //绘制绿色矩形 context.strokeStyle="green"; context.strokeRect(30,130,100,100);
![](/assets/blank.gif)
3.绘制路径
可以通过绘制路径来画出复杂的线条和形状。几个常用方法:
准备绘制:
- beginPath():绘制路径前要先调用该方法,表示即将绘制路径;
绘制:
- moveTo(x,y):从当前点将绘图游标移动到(x,y)而不画线;
- lineTo(x,y):从上一条开始绘制一条线,到(x,y)为止。
- arc(x,y,radius,start,end,counterclockwise):绘制以(x,y)为圆心,半径为radius,起始角度为start,结束角度为end的圆弧。最后一个参数表示是否按逆时针方向计算。
结束绘制:
- context.closePath();//结束绘制
- context.fill();//填充区域
- context.stroke();//描边
![](/assets/blank.gif)
//坐标原点移动 context.translate(400,110); context.lineWidth=1; //复杂线条 context.beginPath(); context.arc(0,0,100,0,2*Math.PI,false); context.moveTo(102,0); context.arc(0,0,103,0,2*Math.PI,false); context.closePath();//结束绘制
![](/assets/blank.gif)
4.绘制文本
设置文本格式:
- font:设置文本的字体、颜色、大小;
- textAlign:文本对齐方式,包括start,end,center;
- textBaseline:文本的基线。
绘制文本:
fillText(text,x,y):使用fillStyle属性绘制文本,其中参数text是要绘制的文本内容,x,y表示坐标位置。
![](/assets/blank.gif)
//绘制文本
context.font="bold 14px"; context.textBaseline="middle"; context.textAlign="center"; context.fillText("12",0,-90); context.fillText("3",90,0); context.fillText("6",0,90); context.fillText("9",-90,0); //绘制表盘指针 context.moveTo(0,0); context.lineTo(70,0); context.moveTo(0,0); context.lineTo(0,-80); context.stroke();
![](/assets/blank.gif)
5.绘制图像
要将图像绘制到画布上,需要调用drawImage方法。该方法最多有9个参数:
drawImage(image,源图像x坐标,源图像y坐标,源图像宽度,源图像高度,目标图像x坐标,目标图像y坐标,目标图像宽度,目标图像高度)。
//绘制图像 var img=document.getElementById("img"); context.drawImage(img,0,0,112,150,300,100,112,150); context.drawImage(img,0,0,112,150,390,220,56,75);
6.模式
模式就是使用重复的图像进行填充或者描边效果。
createPattern(image,pattern):该方法用来创建一个新模式。第一个参数时一个image对象,第二个参数表示图像的重复方式:repeat,repeat-x,repeat-y,no-repeat.
var pattern=context.createPattern(img,"repeat"); context.fillStyle=pattern; context.fillRect(0,400,300,300);
7.渐变 CanvasGradient
①创建线性渐变:
线性渐变先调用方法创建渐变对象:createLinearGradient(起点x坐标,起点y坐标,终点x坐标,终点y坐标);
然后调用方法指定色标:addColorStop(x,y)其中x是色标位置是0-1之间的数值,y是css表示的颜色。
然后调用fillStyle或者strokeStyle设置成渐变对象,就可以了。
![](/assets/blank.gif)
//线性渐变 var gradient=context.createLinearGradient(-200,200,-100,300); gradient.addColorStop(0,'white'); gradient.addColorStop(1,'black'); context.fillStyle=gradient; context.fillRect(-200,200,100,100);
![](/assets/blank.gif)
②创建放射渐变:
创建渐变对象:调用createRadialGradient(起点圆心x坐标,起点圆心y坐标,起点圆半径,终点圆x坐标,终点圆y坐标,终点圆半径);
调用addColorStop()方法设置色标;
将fillStyle或者strokeStype设置成放射渐变对象。
![](/assets/blank.gif)
//放射渐变 var gradientR=context.createRadialGradient(200,200,10,200,200,100); gradientR.addColorStop(0,'white'); gradientR.addColorStop(1,'blue'); context.fillStyle=gradientR; context.fillRect(100,100,200,200);
![](/assets/blank.gif)
本文转自 陈敬(Cathy) 博客园博客,原文链接http://www.cnblogs.com/janes/p/3843191.html:,如需转载请自行联系原作者
读javascript高级程序设计04-canvas相关推荐
- 读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/> 本笔记是为了方便日后查阅,仅作学习交 ...
- 读javascript高级程序设计10-DOM
一.节点关系 元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化. hasChildNodes():是否有子节点. var headline ...
- 读javascript高级程序设计15-Ajax,CORS,JSONP,Img Ping
平时用惯了jQuery.ajax之类的方法,却时常忽略了它背后的实现,本文是学习了AJAX基础及几种跨域解决方案之后的一些收获. 一.AJAX--XMLHttpRequest 谈起Ajax我们都很熟悉 ...
- 读javascript高级程序设计13-JSON
JSON是一个轻量级的数据格式,可以简化表示数据结构的工作量.在实际工作中,我们经常用它来传递数据,不过对于其使用的一些细节还是需要注意的.在ECMAScript5中定义了原生的JSON对象,可以用来 ...
- 读javascript高级程序设计02-变量作用域
一. 延长作用域链 有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs=" ...
- 读javascript高级程序设计12-HTML5脚本编程
一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性, ...
- 读javascript高级程序设计03-函数表达式、闭包、私有变量
一.函数声明和函数表达式 定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); functi ...
- 读javascript高级程序设计11-事件
一.事件流 事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件 ...
- 读javascript高级程序设计06-面向对象之继承
原型链是实现继承的主要方法,通过原型能让一个引用类型继承另一个引用类型. 1.原型链实现继承 function SuperType(){ this.superprop=1; } SuperType.p ...
最新文章
- 镜头视场角计算工具_什么是变焦镜头 变焦镜头介绍【详解】
- 【OpenCV3】图像翻转——cv::flip()详解
- 读盘写盘计算机里面的意义,什么叫计算机里的写盘
- 【小程序】【Tips】【实践】Json 的对象 和 Json字符串 的区别和转换
- java后台管理项目策划书_12款适合做Java后台管理系统的项目
- Python-ZFJObsLib完美生成iOS垃圾代码
- PG数据库表及表注释查询语句
- Spring Security源码解析(一)
- js实现页面视频全屏播放
- 作为一个面试官如何准备一场面试
- WELCOME TO `ICE WORLD`
- 好奇心是怎么驱动成功的
- 微信测试号中被动消息回复的测试
- 计算机组成原理资料(选择题)
- 自行搭建app分发平台
- txt文本去重复 亲测50G文本高效去重复
- 【数字IC验证快速入门】14、SystemVerilog学习之基本语法1(数组、队列、结构体、枚举、字符串...内含实践练习)
- 第一章之OpenCV安装
- 如何删除mysql数据库的重复数据
- CorelDraw2022完整版图形平面设计