119 lines
6.1 KiB
HTML
119 lines
6.1 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Canvas | Auto.js 3.0.0 文档</title>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic">
|
||
<link rel="stylesheet" href="assets/style.css">
|
||
<link rel="stylesheet" href="assets/sh.css">
|
||
<link rel="canonical" href="https://nodejs.org/api/canvas.html">
|
||
</head>
|
||
<body class="alt apidoc" id="api-section-canvas">
|
||
<div id="content" class="clearfix">
|
||
<div id="column2" class="interior">
|
||
<div id="intro" class="interior">
|
||
<a href="/" title="返回首页">
|
||
Auto.js
|
||
</a>
|
||
</div>
|
||
<ul>
|
||
<li><a class="nav-documentation" href="documentation.html">关于本文档</a></li>
|
||
<li><a class="nav-http-www-w3school-com-cn-js-pro_js_syntax-asp" href="http://www.w3school.com.cn/js/pro_js_syntax.asp">W3CSchool - ECMAScript教程</a></li>
|
||
<li><a class="nav-http-es6-ruanyifeng-com-README" href="http://es6.ruanyifeng.com/#README">阮一峰 - ECMAScript 6教程</a></li>
|
||
</ul>
|
||
<div class="line"></div>
|
||
|
||
<ul>
|
||
<li><a class="nav-overview" href="overview.html">Overview - 综述</a></li>
|
||
<li><a class="nav-qa" href="qa.html">Q&A - 常见问题</a></li>
|
||
<li><a class="nav-app" href="app.html">App - 应用</a></li>
|
||
<li><a class="nav-console" href="console.html">Console - 控制台</a></li>
|
||
<li><a class="nav-coordinates-based-automation" href="coordinates-based-automation.html">CoordinatesBasedAutomation - 基于坐标的操作</a></li>
|
||
<li><a class="nav-device" href="device.html">Device - 设备</a></li>
|
||
<li><a class="nav-dialogs" href="dialogs.html">Dialogs - 对话框</a></li>
|
||
<li><a class="nav-engines" href="engines.html">Engines - 脚本引擎</a></li>
|
||
<li><a class="nav-events" href="events.html">Events - 事件与监听</a></li>
|
||
<li><a class="nav-floaty" href="floaty.html">Floaty - 悬浮窗</a></li>
|
||
<li><a class="nav-files" href="files.html">Files - 文件系统</a></li>
|
||
<li><a class="nav-globals" href="globals.html">Globals - 一般全局函数</a></li>
|
||
<li><a class="nav-http" href="http.html">Http - HTTP</a></li>
|
||
<li><a class="nav-images" href="images.html">Images - 图片与图色处理</a></li>
|
||
<li><a class="nav-keys" href="keys.html">Keys - 按键模拟</a></li>
|
||
<li><a class="nav-media" href="media.html">Media - 多媒体</a></li>
|
||
<li><a class="nav-modules" href="modules.html">Modules - 模块</a></li>
|
||
<li><a class="nav-widgets-based-automation" href="widgets-based-automation.html">WidgetsBasedAutomation - 基于控件的操作</a></li>
|
||
<li><a class="nav-sensors" href="sensors.html">Sensors - 传感器</a></li>
|
||
<li><a class="nav-shell" href="shell.html">Shell - Shell命令</a></li>
|
||
<li><a class="nav-storages" href="storages.html">Storages - 本地存储</a></li>
|
||
<li><a class="nav-threads" href="threads.html">Threads - 多线程</a></li>
|
||
<li><a class="nav-timers" href="timers.html">Timers - 定时器</a></li>
|
||
<li><a class="nav-ui" href="ui.html">UI - 用户界面</a></li>
|
||
<li><a class="nav-https-developer-mozilla-org-zh-CN-docs-Mozilla-Projects-Rhino-Scripting_Java" href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Projects/Rhino/Scripting_Java">Work with Java - 调用Java API</a></li>
|
||
</ul>
|
||
<div class="line"></div>
|
||
|
||
<ul>
|
||
<li><a class="nav-https-github-com-hyb1996-NoRootScriptDroid" href="https://github.com/hyb1996/NoRootScriptDroid">GitHub项目 & Issue提交</a></li>
|
||
<li><a class="nav-http-autojs-org" href="http://autojs.org">Auto.js交流社区</a></li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
<div id="column1" data-id="canvas" class="interior">
|
||
<header>
|
||
<h1>Auto.js 3.0.0 文档</h1>
|
||
<div id="gtoc">
|
||
<p>
|
||
<a href="index.html" name="toc">索引</a> |
|
||
<a href="all.html">查看全部</a>
|
||
</p>
|
||
</div>
|
||
<hr>
|
||
</header>
|
||
|
||
<div id="toc">
|
||
<h2>目录</h2>
|
||
<ul>
|
||
<li><span class="stability_undefined"><a href="#canvas_canvas">Canvas</a></span><ul>
|
||
<li><span class="stability_undefined"><a href="#canvas_canvas_drawargb_a_r_g_b">canvas.drawARGB(a, r, g, b)</a></span></li>
|
||
<li><span class="stability_undefined"><a href="#canvas_canvas_draw">canvas.draw</a></span></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
<div id="apicontent">
|
||
<h1>Canvas<span><a class="mark" href="#canvas_canvas" id="canvas_canvas">#</a></span></h1>
|
||
<p>canvas提供了使用画布进行2D画图的支持，可用于简单的小游戏开发或者图片编辑。使用canvas可以轻松地在一张图片或一个界面上绘制各种线与图形。</p>
|
||
<p>canvas的坐标系为平面直角坐标系，以屏幕左上角为原点，屏幕上边为x轴正方向，屏幕左边为y轴正方向。例如分辨率为1920*1080的屏幕上，画一条从屏幕左上角到屏幕右下角的线段为:</p>
|
||
<pre><code>canvas.drawLine(0, 0, 1080, 1920, paint);
|
||
</code></pre><p>canvas的绘制依赖于画笔Paint, 通过设置画笔的粗细、颜色、填充等可以改变绘制出来的图形。例如绘制一个红色实心正方形为：</p>
|
||
<pre><code>var paint = new Paint();
|
||
//设置画笔为填充，则绘制出来的图形都是实心的
|
||
paint.setStyle(Paint.STYLE.FILL);
|
||
//设置画笔颜色为红色
|
||
paint.setColor(colors.RED);
|
||
//绘制一个从坐标(0, 0)到坐标(100, 100)的正方形
|
||
canvas.drawRect(0, 0, 100, 100, paint);
|
||
</code></pre><p>如果要绘制正方形的边框，则通过设置画笔的Style来实现：</p>
|
||
<pre><code>var paint = new Paint();
|
||
//设置画笔为描边，则绘制出来的图形都是轮廓
|
||
paint.setStyle(Paint.STYLE.STROKE);
|
||
//设置画笔颜色为红色
|
||
paint.setColor(colors.RED);
|
||
//绘制一个从坐标(0, 0)到坐标(100, 100)的正方形
|
||
canvas.drawRect(0, 0, 100, 100, paint);
|
||
</code></pre><p>结合画笔canvas可以绘制基本图形、图片等。</p>
|
||
<h2>canvas.drawARGB(a, r, g, b)<span><a class="mark" href="#canvas_canvas_drawargb_a_r_g_b" id="canvas_canvas_drawargb_a_r_g_b">#</a></span></h2>
|
||
<h2>canvas.draw<span><a class="mark" href="#canvas_canvas_draw" id="canvas_canvas_draw">#</a></span></h2>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="assets/sh_main.js"></script>
|
||
<script src="assets/sh_javascript.min.js"></script>
|
||
<script>highlight(undefined, undefined, 'pre');</script>
|
||
<!-- __TRACKING__ -->
|
||
</body>
|
||
</html> |