HTML5 CSS3 drawing jagged rectangle_html5 tutorial tips-H5 Tutorial-php.cn

HTML5 CSS3 drawing jagged rectangle_html5 tutorial tips

WBOY

Release： 2016-05-16 15:45:49

Original

2464 people have browsed it

Recently, I shared some knowledge that I think is worth learning by typing Html5 Css3 and share it with everyone.

How to draw a jagged rectangle: as shown

We know that canvas can be used to draw graphics. Canvas is a new tag that appears in HTML5 and is used to draw graphics on web pages. H5 canvas uses Javascript to draw graphics on web pages.
The jagged rectangle above is drawn with canvas.

Implementation code:

XML/HTML CodeCopy content to clipboard

>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锯齿图title>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function 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();
}
}
script>
head>
<body>
<div style="position: absolute; top: 100px; left: 100px;">
<canvas id="canvas" width="400" height="170" top=50px; left=50px;>
div>
body>
html>

How to write a shape like this, a rectangle divided into two parts, separated by a diagonal line, two colors. As shown in the picture:

At first, the idea was to use a div, draw a slash in the middle, and divide it into two parts with two colors. However, it was not implemented. Due to the weak front desk and limited capabilities, another solution was thought of.

Use three divs, two divs on the left and right, and set the width and height. This part actually plays an important role:

In fact, it is a rectangle divided into two triangles, and finally the above effect is achieved. To put it another way, it is so easy to implement and cannot be hung from a tree.

The code is as follows:

XML/HTML CodeCopy content to clipboard

>
<html lang="en" >
<body style="margin: 0 0 0 0;">
<div id="1" style="background-color:#727171;width:50px;height:20px;float:left" >div>
<div id="2" style=" float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171; border-style:solid">div>
<div id="3" style="background-color:#9fa0a0;width:50px;height:20px;float:left" >div>
body>
html>

The follow-up will continue to summarize some knowledge about HTML and CSS. The knowledge at the front desk may seem simple, but it is actually a detailed job that can exercise one's patience. From simple to complex, from beginner to in-depth, improve yourself little by little.