国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

lijinke666 / 3251人閱讀

摘要：一中心旋轉(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83043.html

相關(guān)文章

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

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

    pumpkin9 評(píng)論0 收藏0

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

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

    maochunguang 評(píng)論0 收藏0

  • 小程序圖片剪裁

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

    qylost 評(píng)論0 收藏0

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

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

    Amos 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<