成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

canvas中心旋轉(zhuǎn)、中心縮放

lijinke666 / 3255人閱讀

摘要：一中心旋轉(zhuǎn)效果代碼矩形中心點(diǎn)旋轉(zhuǎn)前紅色矩形旋轉(zhuǎn)后綠色矩形二中心縮放效果代碼矩形中心點(diǎn)縮放前紅色矩形縮放后綠色矩形

一、中心旋轉(zhuǎn)
效果：

代碼：

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}; // 矩形中心點(diǎn)

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

// 旋轉(zhuǎn)后(綠色矩形)
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}, // 矩形中心點(diǎn)
    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);

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83043.html

相關(guān)文章

  • canvas中的拖拽、縮放、旋轉(zhuǎn) (下) —— 代碼實(shí)現(xiàn)

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

    pumpkin9 評論0 收藏0

  • canvas離屏、旋轉(zhuǎn)效果實(shí)踐——旋轉(zhuǎn)的雪花

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

    maochunguang 評論0 收藏0

  • 小程序圖片剪裁

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

    qylost 評論0 收藏0

  • 鴻蒙開源第三方組件——SwipeCaptcha_ohos3.0旋轉(zhuǎn)驗(yàn)證組件

    摘要：步驟設(shè)置控件監(jiān)聽事件，重新生成驗(yàn)證區(qū)域在文件中添加控件在文件中添加控件，用于顯示旋轉(zhuǎn)驗(yàn)證的動態(tài)效果。先實(shí)例化一個(gè)隨機(jī)數(shù)對象，用于后續(xù)計(jì)算隨機(jī)生成的旋轉(zhuǎn)驗(yàn)證塊角度值。 前言基于安卓平臺的滑動拼## 二級標(biāo)題圖驗(yàn)證組件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCa...

    Amos 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<