Win10系列:JavaScript图形
在页面中添加canvas元素会在页面上生成一个矩形的位图画布,可以使用JavaScript在画布上实时绘制图形图像。在绘制图形时,需要先调用画布的getContext函数获取与该画布相关的用于绘制图形(如2D图形、3D图形)的对象,然后使用这个对象调用不同的图形函数来绘制相应的图形。下面分别介绍2D图形中几种常见图形的绘制方法。
(1)直线
在绘制直线时,先使用moveTo(x,y)函数设置直线的起始点,参数x和y表示起始点的横坐标和纵坐标,以像素为单位,接着通过lineTo(x, y) 函数设置直线的终点,参数x和y表示终点的横坐标和纵坐标,也以像素为单位,最后调用stroke函数绘制直线。下面给出一段绘制直线的示例代码:
//获取相应的画布
var canvasObject = document.getElementById("canvasID");
//获取用于绘制2D图形的对象
var contextObject = canvasObject.getContext("2d");
contextObject.strokeStyle = "rgb(0, 162, 232)"; //设置线条颜色
contextObject.moveTo(28, 20); //设置直线的起点
contextObject.lineTo(78, 50); //设置终点
contextObject.stroke(); //画直线
上面的代码首先以"canvasID"为参数调用document对象的getElementById函数从相应的页面中查找id属性值为canvasID的画布对象,并赋值给canvasObject变量,通过变量canvasObject调用画布对象的getContext函数获取与该画布有关的用于绘制2D图形的对象,并赋值给contextObject变量;接着通过contextObject变量调用strokeStyle属性来设置线条的颜色,并调用moveTo和lineTo函数分别设置直线的起点和终点;最后调用stroke函数绘制直线。
(2)矩形
可以使用fillRect(x, y, width, height)函数绘制带有背景色的矩形,也可以使用strokeRect(x, y, width, height)函数仅绘制矩形的轮廓,其中参数x和y用来设置矩形在画布上的位置,它们是相对于画布的左上角的,width和height 分别表示矩形的宽度和高度,以像素为单位。使用fillRect函数绘制矩形时,可以通过fillStyle属性设置填充颜色,该属性的颜色值可以是 RGB、预定义的颜色(如red红色、blue蓝色等)、十六进制颜色或者渐变色;使用strokeRect函数绘制矩形时,可以通过strokeStyle属性设置线条的颜色,颜色的取值方法与fillStyle属性相同。
(3)多边形
多边形(如三角形、四边形等)是通过绘制多条直线组合成的。在绘制多边形时,先使用moveTo函数在画布上设置一个起始点,然后根据多边形的边数多次使用lineTo函数画出多条首尾相接的直线来组合成多边形。
(4)圆形
可以使用arc(x, y, radius, startAngle, endAngle, anticlockwise)函数绘制圆形,其中参数x和y表示圆心的坐标,x是横坐标,y是纵坐标,都以像素为单位;radius表示圆的半径,startAngle和endAngle表示圆弧的起始弧度和终止弧度;anticlockwise的数据类型是BOOL类型,当取值为true时,会沿着逆时针方向绘制圆,否则将沿着顺时针方向绘制。
介绍了常见图形的绘制方法后,下面以一个应用程序为例演示如何使用JavaScript在画布上绘制这些图形。新建一个JavaScript的Windows应用商店的空白应用程序项目,将其命名为DrawGraphApplication。打开default.html文件,在body元素中添加一个canvas元素,为了便于检索控件,设置画布的id属性值为canvasID。相应的HTML代码片段如下所示:
<body>
<canvas id="canvasID" width="400" height="320"></canvas>
</body>
为了控制画布在应用程序界面上的显示外观,在default.css文件中添加如下代码来控制画布的布局。
/*设置画布的背景色和在应用程序界面上的显示位置*/
#canvasID {
background-color: gray;
margin-left: 20px;
margin-top: 20px;
}
随后双击打开default.js文件,在"args.setPromise(WinJS.UI.processAll());"语句后先添加如下代码来获得画布并获取与该画布相关的用于绘制2D图形的对象。
//获取相应的画布
var canvasObject = document.getElementById("canvasID");
//从该画布中得到用于绘制2D图形的对象
var contextObject = canvasObject.getContext("2d");
//设置所有图形的线条颜色为白色
contextObject.strokeStyle = "rgb(255,255,255)";
像素
contextObject.lineWidth = 2;
在上面的代码中,以"canvasID"为参数调用document对象的getElementById函数查找id属性值为canvasID的画布对象,并赋值给canvasObject变量,然后通过变量canvasObject调用画布对象的getContext函数获取与该画布有关的用于绘制2D图形的对象,并赋值给contextObject变量,接着通过contextObject变量调用用于绘制2D图形的对象的strokeStyle属性来设置所有图形的线条颜色为白色,并通过lineWidth属性设置所有图形的线条宽度为2像素。
紧接着依次添加绘制直线、矩形、三角形、圆形、六边形和填充正方形的代码,下面来分别介绍绘制每种图形的代码。绘制直线的JavaScript代码片段如下所示:
//绘制一条直线
contextObject.beginPath(); //重新设置绘图路径
//直线的起点
contextObject.moveTo(100, 50);
//调用lineTo函数设置终点
contextObject.lineTo(30, 120);
contextObject.stroke();
上面的代码首先通过contextObject变量调用beginPath函数重新设置绘图路径,然后通过moveTo函数设置开始点的x轴坐标为100像素、y轴坐标为50像素,并调用lineTo函数设置直线终点的x轴坐标为30像素、y轴坐标为120像素,最后调用stroke函数绘制直线。
在绘制矩形时,也是先调用beginPath函数重新设置绘图路径,接着调用strokeRect函数在画布中绘制一个x轴坐标为150像素、y轴坐标为50像素、宽度为70像素、高度为80像素的矩形。相应的代码片段如下所示:
//绘制一个矩形
contextObject.beginPath(); //启动一个新的路径,以便绘制下一个图形
//绘制矩形轮廓
contextObject.strokeRect(150, 50, 70, 80);
绘制三角形的JavaScript代码片段如下所示:
//绘制一个三角形
contextObject.beginPath();
//设置要开始绘制三角形的起点
contextObject.moveTo(320, 50);
//依次画三角形的三条边
contextObject.lineTo(270, 120);
contextObject.lineTo(370, 120);
contextObject.lineTo(320, 50);
contextObject.stroke();
在上面的代码中,首先通过contextObject变量调用beginPath函数重新设置绘图路径,然后通过moveTo函数设置开始点的x轴坐标为320像素、y轴坐标为50像素,接着先后三次调用lineTo函数依次设置三条边的终点坐标为(270,120)、(370,120)和(320,50),最后调用stroke函数绘制线条。
在绘制圆形时,调用beginPath函数重新设置绘图路径之后,接着调用arc函数设置圆心的x轴坐标为70像素,y轴坐标为200像素,圆的半径是38像素,圆的起始弧度和终止弧度分别为0弧度和2π弧度,绘制方向为逆时针方向,最后调用stroke函数绘制圆形,相应的JavaScript代码片段如下所示:
// 绘制一个圆形
contextObject.beginPath();
//调用arc函数绘制一个整圆
contextObject.arc(70, 200, 38, 0, 2 * Math.PI, true);
contextObject.stroke();
绘制六边形时,同样先使用beginPath函数重新设置绘图路径,然后调用moveTo函数设置起始点的x轴坐标为190像素、y轴坐标为160像素,接着先后多次调用lineTo函数依次设置六条边的终点坐标为(150, 190)、(150, 230)、(190, 260)、(230, 230)、(230, 190)和(190, 160),最后调用stroke函数绘制线条。相应的JavaScript代码片段如下所示:
//绘制一个六边形
contextObject.beginPath();
//设置要开始绘制六边形的起点
contextObject.moveTo(190, 160);
//依次画六边形的六条边
contextObject.lineTo(150, 190);
contextObject.lineTo(150, 230);
contextObject.lineTo(190, 260);
contextObject.lineTo(230, 230);
contextObject.lineTo(230, 190);
contextObject.lineTo(190, 160);
contextObject.stroke();
以上绘制的是没有填充色的图形,下面绘制一个填充了颜色的正方形。调用beginPath函数重新设置绘图路径之后,通过fillStyle属性设置填充色为浅灰色,接着使用fillRect函数绘制一个x轴坐标为280像素、y轴坐标为160像素、宽度和高度都为80像素的正方形,相应的代码片段如下所示:
//绘制一个填充色为浅灰色的正方形
contextObject.beginPath();
//设置填充色
contextObject.fillStyle = "lightgray";
contextObject.fillRect(280, 160, 80, 80);
启动调试,所绘制的图形就在画布上显示出来了,效果如图19-31所示。
图19-31 在画布上绘制图形的效果
Win10系列:JavaScript图形的更多相关文章
- 推荐12个最好的 JavaScript 图形绘制库
众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web ...
- JavaScript 系列--JavaScript一些奇淫技巧的实现方法(二)数字格式化 1234567890转1,234,567,890;argruments 对象(类数组)转换成数组
一.前言 之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳 https://www.mwcxs.top/page/746 ...
- JavaScript图形实例:线段构图
在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...
- JavaScript图形实例:再谈IFS生成图形
在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...
- JavaScript图形实例:随机SierPinski三角形
在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...
- Win10系列:JavaScript页面导航
页面导航是在开发应用的过程中使用频率较高的技术,其中比较常用的导航方式有多页导航和页内导航,采用多页导航方式的应用程序包含一系列的页面,在一个页面中加入另一个页面的链接地址后,单击链接将跳转到指定页面 ...
- Win10系列:JavaScript小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
- Win10系列:VC++ Direct3D图形绘制1
通过前面的介绍,相信读者已经了解了如何新建一个用于开发Direct3D应用程序的项目模版,以及这个项目模版中用于绘制立体图形的主要函数.在本小节中,将通过一个具体的示例来介绍如何使用Visual St ...
- Win10系列:JavaScript综合实例2
在项目中添加一个名为pages的文件夹,并在pages文件夹里面再添加一个名为mainPage的文件夹,接着在mainPage文件夹里添加一个"页面控制"项,命名为mainPage ...
随机推荐
- Qt532.QSettings_默认分隔符
1.http://bbs.csdn.net/topics/391831509?page=1 2楼: QSettings读取配置文件的内容是以逗号作为分隔符,以分号作为结束符.遇到分号就结束了,后面的内 ...
- 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用
1.网页常见单位: px em pt vw\vh rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言 (最终解析单位) em单位名称为相对长度 ...
- Codeforces 1071 C - Triple Flips
C - Triple Flips 思路: 小范围暴力 大范围递归构造 构造方法: solve(l, r) 表示使l 到 r 区间全变为0的方法 为了使反转次数小于等于n/3 + 12 我们只需要保证每 ...
- Codeforces 1016 E - Rest In The Shades
E - Rest In The Shades 思路: 相似 红色的长度等于(y - s) / y 倍的 A' 和 B' 之间的 fence的长度 A' 是 p 和 A 连线和 x 轴交点, B'同理 ...
- Codeforces 488B - Candy Boxes
B. Candy Boxes 题目链接:http://codeforces.com/problemset/problem/488/B time limit per test 1 second memo ...
- tcpdump使用方法总结
举例: 1.针对指定网卡eth0抓包 tcpdump -i eth0 2.过滤主机 tcpdump -i eth0 host 192.168.1.1 tcpdump -i eth0 src host ...
- python--calc计算器的小程序
x写一个计算器的小程序,正在筹备中......钱不够,演员未定,剧本暂无,请稍等
- SQL SERVER 设置区别大小写
表格中字段设置大小写: --查询时修改 select * from info where name collate Chinese_PRC_CS_AS_WS = 'lily'; --或者修改表对大小写 ...
- HTML第三章总结
在这一章节中,主要讲了 HTML 中众多的 element,element 就像在建筑房屋时候的材料,它可以分为两种: Block Element Inline ElementBlock Elemen ...
- 创建.ignore文件
方法一:1. 在需要创建 .gitignore 文件的文件夹, 右键选择Git Bash 进入命令行,进入项目所在目录.如:(cd /d/git/project) 2. 输入 touch .gitig ...