當前位置：首頁 » 編程語言 » html5矩形

html5矩形

發布時間: 2021-03-27 02:42:33

『壹』 html5怎麼實現繪制矩形嵌套矩形

估計你是初學者吧，當時我學習的時候也有過這種疑問。這些內容在css裡面會講到的。
<div> <div> <div /> <div /> 這樣就可以了。
其實等你學到css以後就全明白了努力學習吧

『貳』用HTML5怎麼實現帶陰影的矩形

向元素添加 box-shadow，例子：

div{box-shadow: 10px 10px 5px #888888;}

以下是一些參數如何設置，希望對你有幫助，望點贊！

『叄』 html 里怎麼畫一個矩形

<!DOCTYPE html>

<head>

</head>

<body>

</svg>

</body>

</html>

『肆』 html5矩形繪圖

1、若是已存在的圖片，根據圖片大小，選擇一個圖片的大小作為標准值:分別右鍵點擊各圖型--設置自選圖形格式--大小--把鎖定縱橫比去掉(假如需要保持則不去掉)--高設為統一的值(需要大小完全相同的話，寬也設為統一的值--鎖定縱橫比去掉的前提下)2、若是新建長方形，可以建好一個，設置好長寬和位置，復制幾個一樣的出來。3、分別全部設置完。還是在「設置自選圖形格式」，把版式改為「浮於文字上方」。這個比較適合移動圖形，其他方式也可以試試。4、Word裡面要想設置的間距完全相同，有一定難度，但基本相同還是可以的--畫一條橫線，長短在「設置自選圖形格式」里改為你想要的間距，以它為標尺。把線移動到第一個圖形的右邊緣，再去移第二個圖形，以此類推。移動時按住ALT鍵拖動，可以微調。--若想完全精確，也有辦法，在「設置自選圖形格式」裡面，「版式」--「高級選項」，這里有位置選項，可以設置離邊距多遠之類的，需要計算一下。基本能達到你的要求了。

『伍』 html5畫布，畫出一個矩形中內嵌一個圓形，求源代碼（圖形顏色無所謂）

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="#FF6699";
ctx.fillRect(0,0,200,200);
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>

『陸』 html5中怎麼畫菱形，多邊形

一、多邊形類:polygon.js

var Point = function (x, y) {
this.x = x;
this.y = y;
};
var Polygon = function (centerX, centerY, radius, sides, startAngle, strokeStyle, fillStyle, filled) {
this.x = centerX;//外接圓心x坐標
this.y = centerY;
this.radius = radius;//外接圓半徑
this.sides = sides;//邊數
this.startAngle = startAngle;//開始角度
this.strokeStyle = strokeStyle;
this.fillStyle = fillStyle;
this.filled = filled;
};
Polygon.prototype = {
getPoints: function () {//獲取多邊形所有頂點
var points = [],
angle = this.startAngle || 0;
for (var i=0; i < this.sides; ++i) {
points.push(new Point(this.x + this.radius * Math.sin(angle),
this.y - this.radius * Math.cos(angle)));
angle += 2*Math.PI/this.sides;
}
return points;
},
createPath: function (context) {//創建多邊形路徑
var points = this.getPoints();
context.beginPath();
context.moveTo(points[0].x, points[0].y);
for (var i=1; i < this.sides; ++i) {
context.lineTo(points[i].x, points[i].y);
}
context.closePath();
},
stroke: function (context) {//對多邊形描邊
context.save();
this.createPath(context);
context.strokeStyle = this.strokeStyle;
context.stroke();
context.restore();
},
fill: function (context) {//填充
context.save();
this.createPath(context);
context.fillStyle = this.fillStyle;
context.fill();
context.restore();
},
move: function (x, y) {
this.x = x;
this.y = y;
},
};

二、HTML文件

<html>

<head>

<META http-equiv="Content-Type" content="text/html; charset=gbk">

<title>拖動多邊形</title>

<style>

body{
background: #eeeeee;
}
#dragDiv {
position: absolute;
left: 25px;
top: 50px;
}

#controls {
position: absolute;
left: 25px;
top: 25px;
}

#canvas {
background: #ffffff;
cursor: crosshair;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}

</style>

</head><body>

<canvas id='canvas' width='850' height='500'>Canvas not supported</canvas>

<div id='controls'>

描邊顏色: <select id='strokeStyleSelect'>

<option value='red' selected>red</option>

<option value='green'>green</option>

<option value='blue'>blue</option>

<option value='orange'>orange</option>

<option value='goldenrod'>goldenrod</option>

<option value='navy'>navy</option>

<option value='purple'>purple</option>

</select>

填充顏色: <select id='fillStyleSelect'>

<option value='rgba(255,0,0,0.5)'>semi-transparent red</option>

<option value='green'>green</option>

<option value='orange'>orange</option>

<option value='goldenrod' selected>goldenrod</option>

<option value='navy'>navy</option>

<option value='purple'>purple</option>

</select>

邊數: <select id='sidesSelect'>

<option value=4 select>4</option>

<option value=6>6</option>

<option value=8>8</option>

<option value=10>10</option>

<option value=12>12</option>

<option value=20>20</option>

</select>

開始角度: <select id='startAngleSelect'>

<option value=0 select>0</option>

<option value=22.5>22.5</option>

<option value=45>45</option>

<option value=67.5>67.5</option>

<option value=90>90</option>

</select>

是否填充 <input id='fillCheckbox' type='checkbox' checked/>

<input id='eraseAllButton' type='button' value='清除所有'/>

</div>

<div id='dragDiv'>

編輯: <input type='checkbox' id='editCheckbox'/>

</div>

<script src = 'polygon.js'></script>

<script src = 'example.js'></script>

</body></html>

三、JS文件 example.js
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
//清除按鈕
eraseAllButton = document.getElementById('eraseAllButton'),
//描邊顏色
strokeStyleSelect = document.getElementById('strokeStyleSelect'),
//畫多邊形的開始角度
startAngleSelect = document.getElementById('startAngleSelect'),
//填充顏色
fillStyleSelect = document.getElementById('fillStyleSelect'),
//不否填充
fillCheckbox = document.getElementById('fillCheckbox'),
//進入編輯
editCheckbox = document.getElementById('editCheckbox'),
//邊數
sidesSelect = document.getElementById('sidesSelect'),
//canvas點陣圖數據
drawingSurfaceImageData,

//記錄滑鼠按下的位置
mousedown = {},
//橡皮筋矩形框
rubberbandRect = {},
dragging = false,//是否在拖動狀態
draggingOffsetX,
draggingOffsetY,
sides = 8,
startAngle = 0,
guidewires = true,
editing = false,
//保存已繪制的多邊形
polygons = [];
// Functions..........................................................
//畫網路線
function drawGrid(color, stepx, stepy) {
context.save()
context.shadowColor = undefined;
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;

context.strokeStyle = color;
context.fillStyle = '#ffffff';
context.lineWidth = 0.5;
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
}
context.stroke();
context.beginPath();
for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
}
context.stroke();
context.restore();
}
//窗口坐標轉canvas坐標
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
// 保存或恢復已繪制的畫面...................................
function saveDrawingSurface() {
drawingSurfaceImageData = context.getImageData(0, 0,canvas.width,canvas.height);
}
function restoreDrawingSurface() {
context.putImageData(drawingSurfaceImageData, 0, 0);
}
// 畫多邊形.....................................................
function drawPolygon(polygon) {
context.beginPath();
polygon.createPath(context);
polygon.stroke(context);
if (fillCheckbox.checked) {
polygon.fill(context);
}
}
// 更新橡皮筋矩形框...................................................
function updateRubberbandRectangle(loc) {
rubberbandRect.width = Math.abs(loc.x - mousedown.x);
rubberbandRect.height = Math.abs(loc.y - mousedown.y);
if (loc.x > mousedown.x) rubberbandRect.left = mousedown.x;
else rubberbandRect.left = loc.x;
if (loc.y > mousedown.y) rubberbandRect.top = mousedown.y;
else rubberbandRect.top = loc.y;
}
//以滑鼠按下點為圓心，橡皮筋框寬為半徑創建多邊形
function drawRubberbandShape(loc, sides, startAngle) {
var polygon = new Polygon(mousedown.x, mousedown.y,
rubberbandRect.width,
parseInt(sidesSelect.value),
(Math.PI / 180) * parseInt(startAngleSelect.value),
context.strokeStyle,
context.fillStyle,
fillCheckbox.checked);
drawPolygon(polygon);//畫多邊形

if (!dragging) {//保存這個多邊形
polygons.push(polygon);
}
}
//更新橡皮筋
function updateRubberband(loc, sides, startAngle) {
updateRubberbandRectangle(loc);
drawRubberbandShape(loc, sides, startAngle);
}
// 網路線.................................................
function drawHorizontalLine (y) {
context.beginPath();
context.moveTo(0,y+0.5);
context.lineTo(context.canvas.width,y+0.5);
context.stroke();
}
function drawVerticalLine (x) {
context.beginPath();
context.moveTo(x+0.5,0);
context.lineTo(x+0.5,context.canvas.height);
context.stroke();
}
function drawGuidewires(x, y) {
context.save();
context.strokeStyle = 'rgba(0,0,230,0.4)';
context.lineWidth = 0.5;
drawVerticalLine(x);
drawHorizontalLine(y);
context.restore();
}
//繪制保存的所有多邊形
function drawPolygons() {
polygons.forEach( function (polygon) {
drawPolygon(polygon);
});
}

希望能夠幫助到你！

『柒』 html 里怎麼畫一個矩形

這個可以用來畫，先說最簡單的一種就是給一個盒子加上邊框
方法一：html部分寫一個div

<div></div>
css 部分：div{
width:200px; //給200像素的寬
height:200px; //給200像素的高
border:1px solid #000; //給一個邊框顏色為黑色
background:transparent; // 給這個盒子一個透明的背景色
}
好了，這個是一個非常簡單的矩形盒子，不過通常都是用H5 的canvas來做的

方法二： html代碼，創建canvas畫布
<canvas id="myCanvas">您的瀏覽器不支持H5 canvas屬性</canvas>
然後就是js 部分了

var c=document.getElementById("myCanvas"); //獲取canvas
var ctx=c.getContext("2d"); 創建一個2D 對象
ctx.beginPath(); //
ctx.lineWidth="6"; //線條寬度
ctx.strokeStyle="red"; //設置為黑色
ctx.rect(5,5,290,140); //創建矩形，起始點的x y坐標，和矩形寬高
ctx.stroke(); //繪制矩形（無填充） [有填充用 ctx.fill（）]
也是可以直接寫

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100); //起始坐標和填充色
方法三：通過繪制路徑來畫矩形

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); //起始點
cxt.lineTo(50,10); //結束點同時也是下一個結束點的起始點
cxt.lineTo(50,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();

閱讀全文

html5矩形

與html5矩形相關的閱讀推薦