canvas에서 여러 개의 그림을 그리고 그림을 회전합니다
1336 단어 웹 프런트엔드
$(function() {
var $my_canvas=$("#myCanvas");
var my_canvas=$my_canvas[0];
var context=my_canvas.getContext("2d");
// context.fill
//ctx.fillStyle="#0000ff";
preImage("img/crcode.png",function(x,y,width,height){
context.save();
context.rotate(10*Math.PI/180);
context.drawImage(this,x,y,width,height);
context.restore();
},{"x":10,"y":10,"width":100,"height":100});
preImage("img/notice-banner.png",function(x,y,width,height){
context.save();
context.rotate(-20*Math.PI/180);
context.drawImage(this,x,y,width,height);
context.restore();
},{"x":0,"y":100,"width":100,"height":100}); //x,y ， ， ，width, ，height
});
function preImage(url,callback,wo){
var img = new Image(); // Image ，
img.src = url;
if (img.complete) { // ，
callback.call(img,wo.x,wo.y,wo.width,wo.height);
return; // ， onload
}
img.onload = function () { // callback 。
callback.call(img,wo.x,wo.y,wo.width,wo.height);// this Image
};
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
highcharts 데이터 테이블 설정 두 가지 등효 방식의 쓰기텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
