Node.js는 두 개의 교차하는 직사각형을 그리고 그 중 하나에는 투명도가 포함되어 있습니다.
- 藏色散人원래의
- 2021-08-02 14:17:411591검색
안녕하세요~ 오늘은 교차하는 두 개의 직사각형을 자바스크립트로 그리는 방법을 소개하겠습니다. 그 중 하나는 알파 투명도를 가지고 있어서 얼핏 보면 좀 불명확해 보이지 않나요? 아래 렌더링을 보시면 한 눈에 확연히 보이실 겁니다!
그림에 표시된 대로:
이해하세요~
즉, 이제 이러한 렌더링을 구현하려면 자바스크립트 프로그램을 작성해야 합니다. 어떤 아이디어가 있습니까?
하하, 말도 안 돼요. 바로 본론으로 들어가죠.
위 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js绘制两个相交的矩形并且其中有一个包含透明度</title>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
<script>
function draw()
{
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var context = canvas.getContext("2d");
context.fillStyle = "rgb(256,0,0)";
context.fillRect (15, 10, 55, 50);
context.fillStyle = "rgba(0, 0, 200, 0.6)";
context.fillRect (35, 30, 55, 50);
}
}
</script>
</body>
</html>이 코드를 직접 복사하여 로컬에서 테스트를 실행할 수 있으며 효과는 위 그림과 동일합니다.
위 코드와 관련하여 몇 가지 중요한 지식 사항을 소개합니다.
1. getElementById() 메서드는 지정된 ID를 가진 첫 번째 개체에 대한 참조를 반환할 수 있습니다. getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
2、Body onload事件，onload事件在页面载入完成后立即触发。注：所有主要浏览器都支持 onload 事件。
3、<canvas></canvas>标签定义图形，比如图表和其他图像。注意：Internet Explorer 8 或更早的浏览器不支持
4、fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。默认值是#000000；其js语法是“context.fillStyle=color|gradient|pattern;”。
5、fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色；其js语法是“context.fillRect(x,y,width,height);
Body onload 이벤트, 페이지가 로드된 직후 onload 이벤트가 트리거됩니다. 참고: 모든 주요 브라우저는 onload 이벤트를 지원합니다. 3. <canvas></canvas> 태그는 차트 및 기타 이미지와 같은 그래픽을 정의합니다. 참고: Internet Explorer 8 이하에서는
fillStyle 속성은 그림을 채우는 데 사용되는 색상, 그라데이션 또는 패턴을 설정하거나 반환합니다. 기본값은 #000000입니다. js 구문은 "context.fillStyle=color|gradient|pattern;"입니다. 🎜🎜5. fillRect() 메서드는 "채워진" 직사각형을 그립니다. 기본 채우기 색상은 검은색입니다. js 구문은 "context.fillRect(x,y,width,height);"입니다. 🎜🎜마지막으로, 공익을 위해 무료로 제공되는 이 플랫폼의 고전 강좌 "🎜JavaScript 빠른 소개_옥녀심경 시리즈🎜"를 여러분께 추천하고 싶습니다. 누구나 학습하실 수 있습니다~🎜위 내용은 Node.js는 두 개의 교차하는 직사각형을 그리고 그 중 하나에는 투명도가 포함되어 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!