当前位置：网站首页>《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>
边栏推荐
- What are the dazzling skills of spot gold?
- 湖北专升本-湖师计科
- Several misunderstandings of VPN
- Group policy disables command prompt bypass
- [vulhub shooting range]] ZABBIX SQL injection (cve-2016-10134) vulnerability recurrence
- jarvisoj_ level2
- Huawei experimental topology set, learning methods are attached at the end of the article!
- get_ started_ 3dsctf_ two thousand and sixteen
- 20 not to be missed ES6 tips
- How can win11 set the CPU performance to be fully turned on? How does win11cpu set high performance mode?
猜你喜欢
【Vulhub靶场】】zabbix-SQL注入(CVE-2016-10134)漏洞复现
20 not to be missed ES6 tips
get_started_3dsctf_2016
More than 60 million shovel excrement officials, can they hold a spring of domestic staple food?
Combine with (& &) logic or (||), dynamic binding and ternary operation
Dichotomous special training
![选择器（＞,~,+,[]）](/img/7e/2becfcf7a7b2e743772deee5916caf.png)
选择器（＞,~,+,[]）
The fund management of London gold is more important than others
![[equalizer] bit error rate performance comparison simulation of LS equalizer, def equalizer and LMMSE equalizer](/img/45/61258aa20cd287047c028f220b7f7a.png)
[equalizer] bit error rate performance comparison simulation of LS equalizer, def equalizer and LMMSE equalizer
[DDCTF2018](╯°□°）╯︵ ┻━┻
随机推荐
10 common malware detection and analysis platforms
简单的折射效果
(cve-2020-11978) command injection vulnerability recurrence in airflow DAG [vulhub range]
The fund management of London gold is more important than others
[learn FPGA programming from scratch -41]: vision chapter - Moore's era and Moore's law and the arrival of the post Moore Era
UE常用控制臺命令
[GUET-CTF2019]zips
Hubei College Upgraded to undergraduate - Hushi family planning department
Global and Chinese market of bed former 2022-2028: Research Report on technology, participants, trends, market size and share
Extend ado Net to realize object-oriented CRUD (.Net core/framework)
C＃ Lambda
More than 60 million shovel excrement officials, can they hold a spring of domestic staple food?
Overview of C program operation mechanism
[wustctf2020] climb
UTC、GMT、CST
Detailed explanation of C language compilation, link and operation
[frame rate doubling] development and implementation of FPGA based video frame rate doubling system Verilog
[image fusion] image fusion based on directional discrete cosine transform and principal component analysis with matlab code
【Vulhub靶场】】zabbix-SQL注入(CVE-2016-10134)漏洞复现
What is automated testing? What software projects are suitable for automated testing?