javascriptcanvas矩形_js怎麼輸入四個坐標在html里生成一個矩形並點擊旋轉按鈕將矩形旋轉45度

『壹』 js 怎麼給canvas里畫多個矩形並分別給它們加層級

本文實例講述了js+canvas繪制矩形的方法。分享給大家供大家參考，具體如下：
運行效果截圖如下：

具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>canvas繪制矩形</title>
<script type="text/javascript" >
function draw(id) {
var canvas = document.getElementById("canvas");
if (canvas) {
var context = canvas.getContext("2d");
context.fillStyle = "#DDDDDD";
context.fillRect(0, 0, 400, 400);
context.strokeStyle = "black";
context.fillStyle = "gray";
context.lineWidth = 5;
context.fillRect(0,0,200,300);
context.strokeRect(0,0,200,200);
} else {
return;
}
}
function drawBorder(id) {
var canvas = document.getElementById("canvas2");
if (canvas) {
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.strokeStyle = "black";
context.lineWidth = 5;
context.fillRect(0,0, 300, 200);
context.strokeRect(0,0,300,200);
} else {
return;
}
}
window.onload = function () {
draw("canvas");
drawBorder("canvas2");
}
</script>
</head>
<body>
<canvas id="canvas" width="400" style="background:red;" height="400"></canvas>
<hr />
<canvas id="canvas2" width="400" height="400"></canvas>
</body>
</html>

『貳』 canvas屬性方法整理

整理了一些有關canvas的屬性（』 - 』 * )

canvas畫布

用於繪制圖像，本身不具備繪制能力，需要通過腳本來完成繪畫，通常這個腳本就是javascript

canvas的默認寬高為300*150，不能通過css或行內樣式修改它的寬高，它有自己的寬高屬性

canvas是一個html元素，通過js來執行繪制

getContext()是用來獲取canvas上下文渲染環境和繪畫功能的方法,目前只有一個參數：'2d'，代表返回一個2d的繪制環境，將來有可能3d，但是目前不支持

它可以做什麼？

html5小游戲

繪制圖片，圖標，圖表，曲線圖等等，例如地圖上的熱力圖等等

以及各種酷炫的動畫效果都可以通過canvas來完成(可以了解一下WEBGL<http://www.hewebgl.com/>)

畫布柵格

![img](https://mdn.mozillademos.org/files/224/Canvas_default_grid.png)

通常畫布的一個格子就代表canvas中元素的一像素，柵格的左上角為起點，坐標0, 0，所有位置都相對於原點定位，

使用：

var canvas = document.gteElementById('canvas');

var context = canvas.getContext('2d'); // 環境准備歷兄好，調用context的方法屬性繪制即可

屬性及方法

beginPath()

新開始一條路徑，繪制方法被指向新路徑

closePath()

閉合當前路徑，讓繪制命令重迅尺新指向上下文

stroke()

通過線條來繪制圖像輪廓

fill()

通過填充路徑的內容區域生成實心圖形

moveTo(x, y)

描述起點坐標

lineTo(x, y)

描述終點坐標

rect(x, y, width, height)

繪制矩形x,y為繪制的起點坐標，width和height為要繪制矩形的寬高，無需加px

需要配和stroke繪制帶邊框的矩形，或者fill繪制實心矩形

strokeRect(x, y. width, height)

參數同上，繪制邊框矩形

fillRect(x,y,width,height)

參數同上，繪制填充矩形

clearRect(x,y,width,height)

清除指定區域矩形,會留下一塊白色矩形區域

arc(x,y,r,sangle,eangle,counterclockwise)

圓弧

x,y為繪制圓的圓心坐標

r為圓的半徑

sangle,eangle為圓的起始角度和結束角度

counterclockwise，可選參數，表示繪制圓是順時針還是逆時針，true為逆時針

strokeStyle

描邊的顏色

fillStyle

填充的顏色

shadowColor

陰影顏色

shadowBlur

畝爛高陰影模糊級別

shadowOffsetX

陰影水平偏移量

shadowOffsetY

陰影垂直偏移量

lineCap

設置線條兩端結束位置的形狀

butt默認

round圓形帽

square正方形

lineJoin

設置線條與線條接合處的樣式

miter (默認)，通過延伸相連部分的外邊緣，使其相交於一點，形成一個額外的菱形區域。

round 通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。圓角的半徑是線段的寬度。

bevel 在相連部分的末端填充一個額外的以三角形為底的區域，每個部分都有各自獨立的矩形拐角。

lineWidth

線條寬度，以像素計算，沒有px

rotate(angle)

旋轉

角度轉弧度公式

deg乘以Math.PI/180

deg為要繪制的角度

Math.PI為圓周率，也就是180度，但是它為一個浮點數，即使除以180也不能忽略它的小數

translate(x, y)

移動原點

將一個坐標原點向x,y正方向移動，如果坐標原點不在原來的位置，則以新的位置加上要移動的位置

scale(x, y)

縮放x軸和y軸分別設置縮放

rotate(x, y)

旋轉

凡是牽扯到度數，都用公式deg乘以Math.PI/180來計算

arcTo(x1,y1,x2,y2,r)

畫圓角，一般兩個直線相交的地方，用此方法繪製成圓弧，x1,y1指圓弧開始的x坐標和y坐標，x2,y2指圓弧結束的x和y坐標，r指半徑

setLineDash/lineDashOffset/getLineDash

繪制虛線

setLineDash([實線長度, 間隙長度])方法接受一個數組，來指定線段與間隙的交替

lineDashOffset設置起始偏移量

getLineDash()返回當前虛線的樣式，為一個數組

fillText(text, x, y [, maxWidth])

繪制填充文本

text文本

x,y指定的坐標

maxWidth最大寬度，可選

strokeText(text, x, y [, maxWidth])

繪制文本邊框

text文本

x,y指定坐標

maxWidth最大寬度，可選

font

文本樣式

和css設置字體相似，復合設置

例如：context.font='100px sans-serif';

textAlign/textBaseline/direction

textAlign(文本對齊選項): start|end|left|right|center

textBaseline(基線對齊選項)：top|hanging|middle|alphabetic|ideographic|bottom

direction(文本方向)：ltr|rtl|inherit

繪制圖片

drawImage(imgElement,x,y,width,height)

x,y繪制圖片的起始坐標

imgElement 要繪制的圖片元素,或者為一個canvas的引用

width,height,設置圖片的寬高

裁剪圖片

drawImage(imgElement,sx, sy, swidth, sheight, x,y,width,height)

imgElement 要繪制的圖片元素,或者為一個canvas的引用

sx, sy (可選)要裁剪的起始位置

swidth, sheight (可選)要裁剪區域的寬高

x,y放置原始圖片的位置

width,height (可選)原始圖片的寬高

為了不失真，一般嘗試讓swidth, sheight和width、height相等，x,y原點，去改變sx,sy(裁剪的起始位置)即可，實際根據需求來定

save()/restore()

save() 保存狀態，保存在棧中，類似於數組的push

restore() 恢復狀態，類似於數組的pop

clip()

裁剪路徑

把一個路徑之外的內容進行裁剪，只保留路徑本身內部的內容

用於控制動畫的常用方法

setInterval()

setTimeout()

requestAnimationFrame()

只執行一次，一般通過遞歸調用來完成動畫製作

接受一個回調函數，專門提供給動畫的api，默認刷新幀率為一秒60次，優於以上兩個方法，比如頁面未激活狀態下回自動暫停，節省cpu的開銷

cancelAnimationFrame() 用來停止此方法的執行

可能有不足的地方歡迎大家補充(•̀⌄•́)

『叄』 js畫矩形

用一個div代替，因為你是矩形，div正好合適，設置下border backgroundcolor等等
用canvas來畫出矩形，html5的新元素，自己去搜索api

『肆』 js怎麼輸入四個坐標在html里生成一個矩形，並點擊旋轉按鈕將矩形旋轉45度

用canvas，畫矩形的方法是rect，四個參數就是輸入的四個坐標，當然也可以用畫線段的方式畫出來。旋轉的話canvas也支持rotate方法，參數是45deg就可以了，跟CSS3差不多的使用方法。

『伍』使用canvas繪制「實心」矩形時,使用什麼方法,該方法的參數分別代表什麼意思

使用canvas繪制「實心」矩形時,使用什麼方法,該方法的參數分別代表：摘大多數 Canvas 繪圖 API都沒有定義在元素本身上，而是定義在通過畫布的 getContext()方法獲得的一個「繪圖環境」對象上。

1、fillRect(x,y,width,height)。繪制一個從(x,y)開始，寬度為width，高度為height的實心矩形。

2、strokeRect(x,y,width,height)。繪制一個從(x,y)開始，寬度為width，高度羨族為height的矩形框。該矩形框會根據當前設置的strokeStyle、lineWidth、lineJoin和miterLimit屬性的不同而渲染成不同的樣式。

差異：

<canvas> 標記和SVG以及 VML 之間的一個重要的不同是，<canvas> 有一個基於JavaScript的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。

這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看陪段，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。

要蘆派譽從同一圖形的一個 <canvas> 標記中移除元素，往往需要擦掉繪圖重新繪制它。

『陸』 Javascript如何在網頁上實現畫圖功能

那是不可能完成的任務，只能用FLASH來實現，當然在HTML5的標准下，這個可以實現，但是HTML5還沒普及。

『柒』怎樣使用canvas繪制一個矩形

1、首先需要新建文件並創建畫布。

導航:首頁 > 編程語言 > javascriptcanvas矩形

javascriptcanvas矩形

與javascriptcanvas矩形相關的資料

友情鏈接