canvasjs圖片（canvas繪製一張圖片）

本文目錄一覽：

• 1、用HTML5中canvas加js代碼把下面這張圖片繪製出釆
• 2、為什麼我用js創建的image在canvas里顯示不出來？
• 3、HTML5、JS的canvas繪製圖片的問題。。
• 4、javascript 怎麼把多幅圖片畫進canvas中，並且能拖動他們，給他們連線
• 5、javascript canvas 如何對圖片進行繞中心點旋轉
• 6、js canvas 旋轉圖片問題！

用HTML5中canvas加js代碼把下面這張圖片繪製出釆

您好，我來為您解答：

本身他是按像素的方式渲染，所以你就1px的空心圓形，太小了，邊緣會出現模糊，如果圓畫大一點情況就會消失。或者你可以先平移下坐標，讓你的中心坐標點是整數，再試看看。

希望我的回答對你有幫助。

為什麼我用js創建的image在canvas里顯示不出來？

你好，當Image對象的src被設置後，圖片才開始被加載到網頁緩存數據中，全部加載完成以後Image對象觸發onload事件回調。如果直接設置完src屬性後立即使用drawImage去讀取圖片數據，那麼圖片尚未加載完成（此時是讀不到的）。因此你需要給image.onload屬性設置一個回調函數，在這個函數里繪製canvas。

HTML5、JS的canvas繪製圖片的問題。。

按照你的描述，估計你之前的代碼有調用過 ctx.scale 或者 ctx.transform 函數，導致坐標軸被縮放了。

建議找到對應的縮放調用，合理使用 ctx.save 和 ctx.restore 函數，來避免上下文環境污染

javascript 怎麼把多幅圖片畫進canvas中，並且能拖動他們，給他們連線

canvas不可以拖動。你也不可以直接拖動canvas裡面的任何元素，包括已經載入的圖片（實際上圖片已經成為canvas的一部分）。先不說連線，因為我不清楚你要怎樣連線。先拿一張圖片來說。

思路：canvas不可以拖動，但div可以啊。考慮div和canvas。位置屬性設置為absolute，否則容易出錯。

注意：將div的z-index值設置大點，保證其在Canvas畫面之上。

將div的大小設置成圖片的大小。

圖片不是在div裡面，也沒必要。

拖動div，拖動到新位置X1,Y1時，清除canvas的圖片：ctx.clearRect(X,Y,W,H);X是上一個位置圖片在canvas中的橫坐標，Y是上一個位置的縱坐標，W是圖片寬度，H是圖片高度。

繪製新位置下的圖片：ctx.drawImage(img,X,Y);img是一個圖片節點。不會用drawImage請百度哈。

【【【具體代碼：】】】

div拖動：

var divObj=document.getElementById(“cover”);

  var moveFlag=false;

    divObj.onmousedown=function(e){

    moveFlag=true;

    var clickEvent=window.event||e;

    var mwidth=clickEvent.clientX-divObj.offsetLeft;

    var mheight=clickEvent.clientY-divObj.offsetTop;

    document.onmousemove=function(e){

      var moveEvent=window.event||e;

      if(moveFlag){

        divObj.style.left=moveEvent.clientX-mwidth+”px”;

        divObj.style.top=moveEvent.clientY-mheight+”px”;

        divObj.onmouseup=function(){

          moveFlag=false;

        }

      }

    }

  };

來解讀下這段代碼：首先獲取div對象，設置拖拽標誌moveFlage,當onmousedown時為true表示可以拖動，當onmouseup時為false表示不能拖動了。

var clickEvent=window.event||e;

      var mwidth=clickEvent.clientX-divObj.offsetLeft;

      var mheight=clickEvent.clientY-divObj.offsetTop;

這三行代碼是為了修正光標位置。當點擊時，記錄下光標在div上的位置。mwidth和mheight表示光標落點相對於div左邊和上邊的距離。

接下來繪製圖片：

首先定義全局變量X和Y，它們是為了實時更新圖像的繪製坐標。

var ctx=document.getElementById(“myCanvas”).getContext(“2d”);

 var img=document.getElementById(“myImg”);

  function drawImg(){

    ctx.clearRect(0,0,1000,500);

    ctx.beginPath();

    ctx.drawImage(img,X,Y);

    ctx.closePath();

    ctx.stroke();

  }

  window.onload=function(){

    setInterval(drawImg,1);

  }

獲取“畫筆”，獲取圖片對象。這裡setInterval循環執行繪製圖片的函數，以刷新圖片的位置，setInterval的間隔值越小，拖拽起來越“流暢”。

同時別忘了clearRect，當圖片移動到下一個位置時，清除上一個位置的圖片，參數為Canvas畫布的坐標和尺寸。

在拖拽時將修正後的光標坐標傳給X、Y：

X=moveEvent.clientX-mwidth;

 Y=moveEvent.clientY-mheight;

最後加上div和圖像的活動範圍：

if(moveEvent.clientX=mwidth){

  divObj.style.left=0+”px”;

  X=0;

}

if(parseInt(divObj.style.left)+divObj.offsetWidth =1000){

  divObj.style.left=1000 – divObj.offsetWidth+”px”;

  X=1000 – divObj.offsetWidth;

}

if(moveEvent.clientY=mheight){

  divObj.style.top=0+”px”;

  Y=0;

}

if(parseInt(divObj.style.top)+divObj.offsetHeight=500){

       divObj.style.top=500-divObj.offsetHeight+”px”;

       Y=500-divObj.offsetHeight;

}

這個就看個人的要求了，注意是要同時限定div和圖片的活動範圍。1000與500為本例的畫布大小，如果是在整個頁面里活動就換成innerWidth或innerHeight。

徹底隱藏div看看效果：

最後說下點擊事件，這裡要注意的是在拖拽的過程中onmousedown與onmouseup二者就構成了一個click過程，但我們不希望在拖拽結束後觸發點擊事件。

這裡有個比較簡單的辦法，定義一個clickFlag默認為false,當onmousedown時設為true，若進行了onmousemove事件時設為false。

在最後onmouseup時判斷clickFlag的值，為true時才觸發點擊事件。也就是說當你按下鼠標時，只有不發現移動，鬆開鼠標時才會觸發點擊事件。

javascript canvas 如何對圖片進行繞中心點旋轉

給你一個旋轉的demo:

!DOCTYPE html

html

body

canvas id=”myCanvas” width=”300″ height=”150″ style=”border:1px solid #d3d3d3;”

Your browser does not support the HTML5 canvas tag.

/canvas

br/

input type=”text” id=”angle_v” readonly=”1″/

script

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

ctx.translate(100,45)

//ctx.rotate(70*Math.PI/180);

//ctx.fillRect(-50,-25,100,50);

var angle=10;

var angle_now = 0;

myRotate()

function myRotate()

{

  ctx.clearRect(-100,-50,200,100);//x2 是為了把原來的圖全部抹掉（不留下痕迹）

  ctx.rotate(angle*Math.PI/180);

  ctx.fillRect(-50,-25,100,50);

  angle_now= (angle_now + angle)%360;

  document.getElementById(“angle_v”).value=”當前角度:”+angle_now;

  setTimeout(myRotate,1000);

}

/script

/body

/html

注意：用roate實現旋轉，重點在於改變坐標中心點 : ctx.translate(100,45)

    坐標中心點計算公式：x = 左上角x + 寬度/2

                                       y = 左上角y + 高度/2

    然後translate到(x,y)即可，之後調用rotate進行旋轉。

    旋轉之後填充時注意：ctx.fillRect(-50,-25,100,50);

                                     x = – 寬度/2

                                     y = -高度/2

                                   fillRect(x,y,寬度，高度)

你的例子，代碼控制比較看不懂。。。，所以沒在基礎上整改。

補充一個參考網站（英文的）：

（如果有幫助，望採納，謝謝）

js canvas 旋轉圖片問題！

所有繪圖動作都是在一瞬間完成的，然後立刻就被restore了，當然看不到任何效果咯。如果想讓整個過程像動畫片一樣慢慢展示給你看，那就要用js代碼結合延時技術才行。