我的項目2用Canvas寫的一些圖形，項目canvas寫圖形

我的項目2用Canvas寫的一些圖形，項目canvas寫圖形

       在項目中，需要用Canvas畫一些圖形，和大家分享一下。

  由於需要常用到這些圖形，就將圖形封裝成了一個一個的方法，在這裡和大家分享一下這些方法吧！

用到的一些變數(有一些變數可能沒寫出來，大家看了就補一下吧)：<pre name="code" class="html">lineWidth="1";

<pre name="code" class="html">color="blue";

strokeStyle="red";

fillStyle="blue";

//繪製橫線function drawhengxian(startPoint, l, color) {context.beginPath();context.moveTo(startPoint.x, startPoint.y);context.lineTo(startPoint.x + l, startPoint.y);context.lineWidth = lineWidth;context.strokeStyle = color;context.stroke();}

//繪製折線function drawZheXian(points) {// 繪製折現context.beginPath();context.moveTo(points[0].x, points[0].y);for (var i = 1; i < points.length; i++) {context.lineTo(points[i].x, points[i].y);}context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//繪製豎線function drawshuxian(starPoint, l) {context.beginPath();context.moveTo(starPoint.x, starPoint.y);context.lineTo(starPoint.x, starPoint.y - l);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//繪製空心圓function drawEmptyArc(center, radius) {context.beginPath();context.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);context.fillStyle = fillStyle;context.fill();context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//繪製實心三角形（即有顏色填充的三角形）function drawshendanshu(points, colors) {// 繪製折現context.beginPath();context.moveTo(points[0].x, points[0].y);for (var i = 1; i < points.length; i++) {context.lineTo(points[i].x, points[i].y);}//結束繪製context.closePath();// 進行繪圖處理context.fillStyle = colors;// 填充路徑context.fill();}//繪製雪花圖案function drawCha(center, l) {context.beginPath();context.moveTo(center.x - l, center.y - l);context.lineTo(center.x + l, center.y + l);context.moveTo(center.x - l * 1.414, center.y);context.lineTo(center.x + l * 1.414, center.y);context.moveTo(center.x - l, center.y + l);context.lineTo(center.x + l, center.y - l);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//繪製電源（即三條長短不一的豎線） function drawsanshuxian(center, l, isAnode) {context.beginPath();if (isAnode) {context.moveTo(center.x - l, center.y - l * 3);context.lineTo(center.x - l, center.y + l * 3);context.moveTo(center.x, center.y - l * 2);context.lineTo(center.x, center.y + l * 2);context.moveTo(center.x + l, center.y + l);context.lineTo(center.x + l, center.y - l);} else {context.moveTo(center.x - l, center.y + l);context.lineTo(center.x - l, center.y - l);context.moveTo(center.x, center.y - l * 2);context.lineTo(center.x, center.y + l * 2);context.moveTo(center.x + l, center.y - l * 3);context.lineTo(center.x + l, center.y + l * 3);}context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//繪製2個半圓function drawBanYuan2(center, l, isUp) {var radius = l / 4.0;var i;for (i = 0; i < 2; i++) {context.beginPath();if (i == 0) {context.arc(center.x + radius, center.y, radius, 0, Math.PI, isUp);} else {context.arc(center.x + 3 * radius, center.y, radius, 0, Math.PI, isUp);}context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}}//電阻線（好多小半圓組成，大家可以試一下）function drawXianQuan(startPoint, l) {

var r = l / 5;var potions1 = [];for (var i = 0; i < 5; i++) {var px = startPoint.x + i * r;var py = startPoint.y;potions1.push({x: px,y: py});}var potions2 = [];for (var i = 0; i < 5; i++) {var px = startPoint.x + i * r;var py = startPoint.y + l / 3;potions2.push({x: px,y: py});}context.beginPath();context.moveTo(startPoint.x, startPoint.y + l / 6);context.lineTo(startPoint.x + l, startPoint.y + l / 6);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();var radius = l / 10;for (var i = 0; i < potions1.length; i++) {context.beginPath();var isTop;if (i % 2 == 0) {isTop = true;} else {isTop = false;}context.arc(potions1[i].x + radius, potions1[i].y, radius, 0, Math.PI, isTop);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}for (var i = 0; i < potions2.length; i++) {context.beginPath();var isTop;if (i % 2 == 0) {isTop = true;} else {isTop = false;}context.arc(potions2[i].x + radius, potions2[i].y, radius, 0, Math.PI, isTop);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}}//繪製實體圓function drawFillArc(center, radius) {context.beginPath();context.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);context.fillStyle = "black";context.fill();}//繪製長方形function drawFillRect(x, y, a, b) {var c = document.getElementById("myCanvas");var cxt = c.getContext("2d");cxt.strokeRect(x, y, a, b);}

html5 兩個canvas重疊放在一個div裡面，每個canvas各填充一張圖片，代碼怎寫？

指定兩個canvas的postion:absolution,然後設定者兩個canvas的left與top屬性，需要注意的是建議把小的canvas放到上面，方法是設定兩個canvas的z-index為不同的值，值大的在上面。
繪圖的過程可以參考一下代碼：
var mycanvas=document.getElementByIdx_x_x_x("mycanvas");
var context = mycanvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){

// draw cropped image
var sourceX = 350;
var sourceY = 50;
var sourceWidth = 350;
var sourceHeight = 350;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = mycanvas.width / 2 - destWidth / 2;
var destY = mycanvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
 
您好，教您一個html5 canvas的問題： 我在canvas中畫了多個圖形，有映像（image）、直線

canvas可以實現
首先canvas要響應滑鼠事件（onmousedown之類）
之後所有的圖形必須要建立相應的對象，來記錄他們所在的位置以及大小還有zOrder（層疊位置，在2個對象重疊的時候決定誰在上面），相應的對象放到一個數組裡並按zOrder排序
當canvas的滑鼠click事件觸發後，按照zOrder的順序來檢測滑鼠座標在不在某個對象的地區裡，如果在，則執行相應的函數