canvas中心旋轉、中心縮放

lijinke666 發布于2019-08-20 16:37 / 3242人閱讀

摘要：一中心旋轉效果代碼矩形中心點旋轉前紅色矩形旋轉后綠色矩形二中心縮放效果代碼矩形中心點縮放前紅色矩形縮放后綠色矩形

一、中心旋轉
效果：

代碼：

var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = "#ffffd";
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
var x = 100,
    y = 100,
    width = 150,
    height = 150,
    angle = 90,
    rectCenterPoint = {x: x+width/2, y: y+height/2}; // 矩形中心點

// 旋轉前(紅色矩形)
ctx.fillStyle = "#f00";
ctx.fillRect(x, y, width, height);

// 旋轉后(綠色矩形)
ctx.translate(rectCenterPoint.x, rectCenterPoint.y);
ctx.rotate(angle);
ctx.translate(-rectCenterPoint.x, -rectCenterPoint.y);
ctx.fillStyle = "#690";
ctx.fillRect(x, y, width, height);

二、中心縮放
效果：

代碼：

var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = "#ffffd";
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
var x = 100,
    y = 100,
    width = 150,
    height = 150,
    rectCenterPoint = {x: x+width/2, y: y+height/2}, // 矩形中心點
    scaleX = 0.5,
    scaleY = 0.4;

// 縮放前(紅色矩形)
ctx.fillStyle = "#f00";
ctx.fillRect(x, y, width, height);

// 縮放后(綠色矩形)
ctx.translate(rectCenterPoint.x*(1-scaleX), rectCenterPoint.y*(1-scaleY));
ctx.scale(scaleX, scaleY);
ctx.fillStyle = "#690";
ctx.fillRect(x, y, width, height);

GPU云服務器云服務器 js 圖片按中心旋轉 Canvas _canvas 2canvas

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83043.html

canvas中的拖拽、縮放、旋轉 (下) —— 代碼實現

摘要：中的拖拽縮放旋轉上數學知識準備。表示整個區域，表示中的元素。事實上，工作上的需求并沒有要求旋轉，只需要實現拖拽縮放即可。寫在前面 showImg(https://segmentfault.com/img/bVbonep?w=283&h=306); 本文首發于公眾號：符合預期的CoyPan demo體驗地址及代碼在這里：請用手機或瀏覽器模擬手機訪問上一篇文章介紹了canvas中的拖拽...

pumpkin9 2019-08-23 15:13 評論0 收藏0
canvas離屏、旋轉效果實踐——旋轉的雪花

摘要：另外這里循環中用到了的旋轉效果，所以我們可以很輕易的畫出條有角度的線。效果見文章開頭的效果展示鏈接效果展示理論基礎——常見的canvas優化——模糊問題、旋轉效果用離屏canvas畫基礎部分 1、封裝畫線函數 function drawLine(ctx,x1,y1,x2,y2,color){ ctx.save(); ctx.beginPath(); ctx.stroke...

maochunguang 2019-08-20 16:31 評論0 收藏0
小程序圖片剪裁

摘要：基于上面原因，我采用的是里面放置圖片，監聽上面的手勢，通過樣式控制圖片的旋轉縮放和移動，最后剪裁用隱藏的。一個微信小程序圖片剪裁組件，可以通過手勢控制旋轉縮放移動，也可以點擊旋轉進行90度旋轉，先看下效果（視屏不知道為啥用不了，上個壓縮過度的GIF先）：showImg(https://segmentfault.com/img/bVbewtR?w=312&h=550); 圖片剪裁毫無疑...

qylost 2019-08-23 10:30 評論0 收藏0
鴻蒙開源第三方組件——SwipeCaptcha_ohos3.0旋轉驗證組件

摘要：步驟設置控件監聽事件，重新生成驗證區域在文件中添加控件在文件中添加控件，用于顯示旋轉驗證的動態效果。先實例化一個隨機數對象，用于后續計算隨機生成的旋轉驗證塊角度值。前言基于安卓平臺的滑動拼## 二級標題圖驗證組件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCa...

Amos 2021-11-23 09:51 評論0 收藏0