HTML5 CSS3 들쭉날쭉한 직사각형 그리기_html5 튜토리얼 팁-H5 튜토리얼-php.cn

HTML5 CSS3 들쭉날쭉한 직사각형 그리기_html5 튜토리얼 팁

WBOY

풀어 주다： 2016-05-16 15:45:49

원래의

2425명이 탐색했습니다.

최근에 나는 Html5 Css3을 입력하여 배울 가치가 있다고 생각하는 지식을 공유하고 모든 사람과 공유했습니다.

삐죽삐죽한 직사각형을 그리는 방법: 그림과 같이

우리는 캔버스를 사용하여 그래픽을 그릴 수 있다는 것을 알고 있습니다. 캔버스는 HTML5에 나타나는 새로운 태그로 웹 페이지에 그래픽을 그리는 데 사용됩니다. H5 캔버스는 웹 페이지에 그래픽을 그리는 데 사용됩니다.
위의 들쭉날쭉한 직사각형은 캔버스로 그린 것입니다.

구현 코드:

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html lang="ko" >
<머리>
<메타 문자 집합="UTF- 8">
<제목>锯齿图제목>
<스크립트 유형="text/ javascript">
window.addEventListener("load", eventWindowLoaded, false);
함수 eventWindowLoaded(){
var x,y;
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
context.StrokeStyle = '#CB9A61';
context.lineWidth=10;
context.StrokeRect(10, 10, theCanvas.width-20, theCanvas.height-20);
context.fillStyle = "#FFFFFF";
for(x=5;x<=canvas.width;xx=x 10){
context.beginPath();
context.arc(x,5,5,0,Math.PI*2,true);
context.arc(x,canvas.height-5,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
for(y=5;y<=canvas.height;yy=y 10){
context.beginPath();
context.arc(5,y,5,0,Math.PI*2,true);
context.arc(canvas.width-5,y,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
스크립트>
머리>
<몸>
<div style="위치: 절대; 상단: 100px; 왼쪽: 100px;">
<캔버스 id="캔버스" 너비="400" 높이="170" 상단=50px; 왼쪽=50px;>
div>
몸>
html>

이런 도형을 쓰는 방법은 두 부분으로 나누어진 직사각형, 대각선으로 구분된 두 가지 색상입니다. 사진과 같이:

처음에는 div를 사용하고 가운데에 슬래시를 그려서 두 가지 색상으로 두 부분으로 나누는 것이 아이디어였지만 약한 프런트 데스크와 제한된 기능으로 인해 다른 솔루션으로 구현되지 않았습니다. 생각되었다.

왼쪽과 오른쪽에 2개의 div를 사용하고 너비와 높이를 설정합니다. 이 부분이 실제로 중요한 역할을 합니다.

실제로 두 개의 삼각형으로 나누어진 직사각형인데, 드디어 위의 효과가 달성되었습니다. 달리 말하면, 구현하기가 너무 쉽고 나무에 걸 수도 없습니다.

코드는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html lang="ko" >
<본체 스타일="여백: 0 0 0 0;">
<div id="1" 스타일="배경색:#727171;너비:50px;높이:20px;부동:왼쪽" >div>
<div id="2" 스타일=" float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171; border-style:solid">div>
<div id="3" 스타일="배경색:#9fa0a0;너비:50px;높이:20px;부동산:왼쪽" >div>
몸>
html>