当前位置：网站首页>《canvas》之第2章 直线图形
《canvas》之第2章 直线图形
2022-06-24 06:44:00 【yxqq378287007】
《canvas》之第2章 直线图形
第2章 直线图形
2.1 直线图形简介
直线、矩形、多边形。
2.2 直线
2.2.1 canvas坐标系
canvas使用W3C坐标系。
原点左上角，x轴正方向向右，y轴正方向向下。
2.2.2 直线的绘制
moveTo()和lineTo()配合使用来画直线。
- 一条直线
ctx.moveTo(x1, y1); //移动到起点
ctx.lineTo(x2, y2); //连接到终点
ctx.stroke(); //开始绘制
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(50, 100); cxt.lineTo(150, 50); cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 多条直线
- 三条直线
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(50, 50); cxt.lineTo(100, 50); cxt.lineTo(50, 100);//上个点（100, 50）为新的起点。 //cxt.moveTo(50, 100); cxt.lineTo(100, 100); cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 三角形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(50, 100);//首尾重合 cxt.lineTo(150, 50); cxt.lineTo(150, 100); cxt.lineTo(50, 100);//首尾重合 cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 矩形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(50, 100);//首尾重合 cxt.lineTo(50, 50); cxt.lineTo(150, 50); cxt.lineTo(150, 100); cxt.lineTo(50, 100);//首尾重合 cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
2.3 矩形
矩形分为描边矩形和填充矩形。
2.3.1 描边矩形
strokeStyle属性和strokeRect()方法画描边矩形。
ctx.strokeStyle = 属性值;
cts.strokeRect(x, y, width, height);
- strokeStyle属性
3种取值：颜色值、渐变色和图案。
ctx.strokeStyle = "#FF0000";
ctx.strokeStyle = "#F00";
ctx.strokeStyle = "red";
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.strokeStyle = "rgba(255, 0, 0, 0.8)";
- strokeRect()方法
先设置好strokeStyle属性，后使用strokeRect()方法。
- 描边矩形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.strokeStyle = "red"; cxt.strokeRect(50, 50, 80, 80); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
2.3.2 填充矩形
fillStyle属性和fillRect()方法画填充矩形。
ctx.fillStyle = 属性值;
cts.fillRect(x, y, width, height);
- fillStyle属性
3种取值：颜色值、渐变色和图案。
ctx.fillStyle= "#FF0000";
ctx.fillStyle= "#F00";
ctx.fillStyle= "red";
ctx.fillStyle= "rgb(255, 0, 0)";
ctx.fillStyle= "rgba(255, 0, 0, 0.8)";
- fillRect()方法
先设置好fillStyle属性，后使用fillRect()方法。
- 填充矩形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.fillStyle = "HotPink"; cxt.fillRect(50, 50, 80, 80); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 同时绘制描边矩形和填充矩形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.strokeStyle = "red"; cxt.strokeRect(50, 50, 80, 80); cxt.fillStyle = "#FFE8E8"; cxt.fillRect(50, 50, 80, 80); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 两个重叠的填充矩形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.fillStyle = "HotPink"; cxt.fillRect(50, 50, 80, 80); cxt.fillStyle = "rgba(0, 0, 255, 0.3)"; cxt.fillRect(30, 30, 80, 80); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
2.3.3 rect()方法
rect(x, y, width, height);
strokeRect()和fillRect()调用后，立即绘制矩形。
rect()调用后，再调用stroke()或fill()才会绘制矩形。
ctx.rect(50, 50, 80, 80);
ctx.strokeStyle="red";
ctx.stroke();
//等价于
ctx.strokeStyle="red";
ctx.strokeRect(50, 50, 80, 80);
ctx.rect(50, 50, 80, 80);
ctx.fillStyle="red";
ctx.fill();
//等价于
ctx.fillStyle="red";
ctx.fillRect(50, 50, 80, 80);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); //绘制描边矩形 cxt.rect(50, 50, 80, 80); cxt.strokeStyle = "red"; cxt.stroke(); //绘制填充矩形 cxt.rect(50, 50, 80, 80); cxt.fillStyle = "#FFE8E8"; cxt.fill(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
2.3.4 清空矩形
cxt.clearRect(x, y, width, height);
- 清空指定区域
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.fillStyle = "HotPink"; cxt.fillRect(50, 50, 80, 80); cxt.clearRect(60, 60, 50, 50); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 清空canvas
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.fillStyle = "HotPink"; cxt.fillRect(50, 50, 80, 80); var btn = $$("btn"); btn.onclick = function () {
cxt.clearRect(0, 0, cnv.width, cnv.height); } } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br />
<input id="btn" type="button" value="清空canvas" />
</body>
</html>
2.4 多边形
计算各顶点坐标，然后使用moveTo()和lineTo()绘制出来。
2.4.1 箭头
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(40, 60); cxt.lineTo(100, 60); cxt.lineTo(100, 30); cxt.lineTo(150, 75); cxt.lineTo(100, 120); cxt.lineTo(100, 90); cxt.lineTo(40, 90); cxt.lineTo(40, 60); cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
2.4.2 正多边形
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var n = 15; var centerX = 100; var centerY = 75; var r = 50; createPolygon(cxt, n, centerX, centerY, r);//调用自定义的方法createPolygon() cxt.fillStyle = "HotPink"; cxt.fill(); } /* * n：表示n边形 * centerX、centerY：表示n边形中心坐标 * r：表示n边形的大小 */ function createPolygon(cxt, n, centerX, centerY, r) {
cxt.beginPath(); for (var i = 0; i < n; i++) {
var x = Math.cos(2*Math.PI*i/n); var y = Math.sin(2*Math.PI*i/n); cxt.lineTo(centerX+r*x, centerY+r*y); } cxt.closePath(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
2.4.3 多角星
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var n = 6; var centerX = cnv.width/2; var centerY = cnv.height/2; var rMax = 50; var rMin = 25; createPolygonalStar(cxt, n, centerX, centerY, rMax, rMin) cxt.closePath(); cxt.stroke(); /* * n：表示n角星 * centerX、centerY：表示n角星中心坐标 * rMax：表示n角星外部圆的半径 * rMin：表示n角星内部圆的半径 */ function createPolygonalStar(cxt, n, centerX, centerY, rMax, rMin) {
cxt.beginPath(); for (var i = 0; i < n; i++) {
var xMax = rMax*Math.cos(2*Math.PI*i/n); var yMax = rMax*Math.sin(2*Math.PI*i/n); cxt.lineTo(centerX+xMax, centerY+yMax); var xMin = rMin*Math.cos(2*Math.PI*(i+0.5)/n); var yMin = rMin*Math.sin(2*Math.PI*(i+0.5)/n); cxt.lineTo(centerX+xMin, centerY+yMin); } cxt.closePath(); } } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
2.5 绘制调色板
- 方格调色板
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var n = 8; var step = 30; for(var y = 0; y < n; y++) {
for(var x = 0; x < n; x++) {
cxt.fillStyle = "rgb(" + Math.floor(255-255*y/n) + ", " + Math.floor(255-255*x/n) + ", 0)"; cxt.fillRect(x*step, y*step, step, step); } } } </script>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 渐变调色板
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var r = 255, g = 0, b = 0; var step = 6; for(var i = 0; i < 150; i++) {
if(i < 25) {
g += 10; } else if(i > 25 && i < 50) {
r -= 10; } else if (i > 50 && i < 75) {
g -= 10; b += 10; } else if(i >= 75 && i < 100) {
r += 10; } else {
b -= 10; } cxt.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")"; cxt.fillRect(step*i, 0, step, cnv.height-10); } } </script>
</head>
<body>
<canvas id="canvas" width="1000" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
边栏推荐
- Huawei experimental topology set, learning methods are attached at the end of the article!
- UE common console commands
- Prefix and topic training
- MFC multithreaded semaphore csemaphore critical area and mutually exclusive events
- bjdctf_2020_babystack
- 只显示两行，超出部分省略号显示
- Event related | reveal how Ti-One's support ability for large-scale events is developed
- Shell script for MySQL real-time synchronization of binlog
- （CVE-2020-11978）Airflow dag中的命令注入漏洞复现【vulhub靶场】
- In the era of industrial Internet, there are no more centers in the real sense, and these centers just turn tangible into intangible
猜你喜欢
![[WUSTCTF2020]爬](/img/b6/4a0582144c3125e7a0666bbbbfe29d.png)
[WUSTCTF2020]爬
![[MRCTF2020]千层套路](/img/8e/d7b6e7025b87ea0f43a6123760a113.png)
[MRCTF2020]千层套路
More than 60 million shovel excrement officials, can they hold a spring of domestic staple food?
![[WordPress website] 5 Set code highlight](/img/01/f669b70f236c334b98527a9320400c.png)
[WordPress website] 5 Set code highlight
【Vulhub靶场】】zabbix-SQL注入(CVE-2016-10134)漏洞复现
![[tips] use the deep learning toolbox of MATLAB deepnetworkdesigner to quickly design](/img/74/f615191715a9ac58a8546f8d1e8f8d.png)
[tips] use the deep learning toolbox of MATLAB deepnetworkdesigner to quickly design
jarvisoj_ level2
（CVE-2020-11978）Airflow dag中的命令注入漏洞复现【vulhub靶场】
jarvisoj_level2
![选择器（＞,~,+,[]）](/img/7e/2becfcf7a7b2e743772deee5916caf.png)
选择器（＞,~,+,[]）
随机推荐
[DDCTF2018](╯°□°）╯︵ ┻━┻
Deploy L2TP in VPN (Part 1)
Reppoints: Microsoft skillfully uses deformation convolution to generate point sets for target detection, full of creativity | iccv 2019
Pyhton crawls to Adu (Li Yifeng) Weibo comments
简单的折射效果
Tencent cloud security and privacy computing has passed the evaluation of the ICT Institute and obtained national recognition
RDD基础知识点
[GUET-CTF2019]zips
[learn FPGA programming from scratch -42]: Vision - technological evolution of chip design in the "post Moorish era" - 1 - current situation
Software performance test analysis and tuning practice path - JMeter's performance pressure test analysis and tuning of RPC Services - manuscript excerpts
[equalizer] bit error rate performance comparison simulation of LS equalizer, def equalizer and LMMSE equalizer
How to select a third-party software testing company? 2022 ranking of domestic software testing institutions
jarvisoj_level2
选择器（＞,~,+,[]）
[image fusion] image fusion based on pseudo Wigner distribution (PWD) with matlab code
PCL point cloud random sampling by ratio
MFC multithreaded semaphore csemaphore critical area and mutually exclusive events
[wustctf2020] climb
Global and Chinese market of offshore furnaces 2022-2028: Research Report on technology, participants, trends, market size and share
How to realize high stability and high concurrency of live video streaming transmission and viewing?