当前位置：网站首页>《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>
边栏推荐
- Unity Culling 相关技术
- PNAs: Geometric renormalization reveals the self similarity of multi-scale human connectome
- Global and Chinese markets for maritime transport of perishable goods 2022-2028: Research Report on technology, participants, trends, market size and share
- Quickly set up PgSQL for serverless
- (cve-2020-11978) command injection vulnerability recurrence in airflow DAG [vulhub range]
- In the era of industrial Internet, there are no more centers in the real sense, and these centers just turn tangible into intangible
- RDD基础知识点
- Tutorial on simple use of Modbus to BACnet gateway
- What is a CC attack? How to judge whether a website is attacked by CC? How to defend against CC attacks?
- [从零开始学习FPGA编程-42]：视野篇 - 后摩尔时代”芯片设计的技术演进-1-现状
猜你喜欢
Dichotomous special training
图形技术之管线概念
bjdctf_2020_babystack
![[mrctf2020] thousand layer routine](/img/8e/d7b6e7025b87ea0f43a6123760a113.png)
[mrctf2020] thousand layer routine
Only two lines are displayed, and the excess part is displayed with Ellipsis
Tutorial on simple use of Modbus to BACnet gateway
Win11 points how to divide disks? How to divide disks in win11 system?
![buuctf misc [UTCTF2020]docx](/img/e4/e160f704d6aa754e85056840e14bd2.png)
buuctf misc [UTCTF2020]docx
get_ started_ 3dsctf_ two thousand and sixteen
How can genetic testing help patients fight disease?
随机推荐
什么是CC攻击？如何判断网站是否被CC攻击？ CC攻击怎么防御？
bjdctf_2020_babystack
[mrctf2020] thousand layer routine
UE常用控制臺命令
Obtain the package name, application name, icon, etc. of the uninstalled APK through packagemanager. There is a small message
What is the mentality of spot gold worth learning from
How can genetic testing help patients fight disease?
L2tp/ipsec one click installation script
[WUSTCTF2020]爬
[image fusion] image fusion based on directional discrete cosine transform and principal component analysis with matlab code
Group policy disables command prompt bypass
Knowledge points of 2022 system integration project management engineer examination: ITSS information technology service
[DDCTF2018](╯°□°）╯︵ ┻━┻
Tutorial on simple use of Modbus to BACnet gateway
PCL calculates the area of a polygon
How to turn on win11 notebook power saving mode? How to open win11 computer power saving mode
图形技术之坐标转换
Reconfiguration of nebula integration testing framework based on BDD theory (Part 2)
只显示两行，超出部分省略号显示
Event related | reveal how Ti-One's support ability for large-scale events is developed