検索

今日お話しするのは canvas の変換機能です。前の内容に興味がない場合は、そのまま進んでください。まずは基本的な知識を見てみましょう。本題に入りましょう!
変換機能とは何ですか? CSS3 に詳しい学生は、CSS3 に変換、移動、拡大縮小、回転、アニメーションなどがあることを知っています。これは CSS3 の変形機能でもありますが、部分的にしかサポートされていません。 css3 と比較して、どのような違いがありますか?
1.scale

scale(scaleWidth,scaleHeight) 現在の図面を拡大縮小します

パラメータ:scaleWidth は、0.5 = 50%、1 = 100%、2 = 200% などの値で現在の図面の幅を表します。など;scaleHeight は、0.5 = 50%、1 = 100%、2 = 200% などの値で現在の図面の高さをスケールします
最初に css3:
css3 スケールのパフォーマンスを確認します。 (sx,sy) sx,sy はそれぞれ横軸と縦軸へのスケーリングベクトルは 0.5 = 50%、1 = 100%、2 = 200% などの値を持ちます。基本的には Canvas と同じです。用語は異なりますが、使用法は同じなので、試してみましょう:

ctx.strokeStyle = 'red';
ctx.strokeRect(5,5,50,50);
ctx.scale(2,2);
ctx.strokeRect(5,5,50,50);
ctx.scale(2,2);
ctx.strokeRect(5,5,50,50);



Canvas API、一般的な Canvas の基本 (4)

咦、非常に奇妙な現象が見られます。位置決めの原点からスケーリングが開始されず、原点がオフセットされます。実際には、グラフィックスがスケーリングされるだけでなく、グラフィックスのマージンもスケーリングされ、スケーリング倍数はグラフィックス倍数と一致します。CSS3 のスケーリングがどのように実行されるかを見てみましょう:

.box{
    width:50px;
    height:50px;
    border:1px solid #000;
    margin:20px;
}
.box:hover{
    -webkit-transform:scale(2,2);
}



Canvas API、一般的な Canvas の基本 (4)

Canvas API、一般的な Canvas の基本 (4)

css3 パフォーマンスは、グラフィックの中心点を原点として取り、それを拡大縮小することです。これから、キャンバスのスケールと css3 のスケールの違いの 1 つが得られます。

2 番目の違いは、x、y 軸の css3 のスケールです。ズーム率が同じ場合、次のように 1 つのパラメータに短縮できます。

.box:hover{
    -webkit-transform:scale(2);
}


効果は同じですが、 Canvas の 2 つのパラメータは、たとえズーム倍率が同じであっても省略できません。実行するには両方のパラメータを Write にする必要があります

そういえば、Canvas API の最初に疑問があったことを思い出しました。 Canvas の幅と高さの設定は Canvas タグの属性で設定する必要があり、CSS では設定できないのはなぜですか?例を見てみましょう:

最初のグループでは、CSS を使用してキャンバスの幅と高さを定義します。ラベル属性にはスタイルがありません:

canvas{ background:#fff; width:300px; height:300px; }


ctx.strokeStyle = 'red';
ctx.strokeRect(5,5,50,50);


Canvas API、一般的な Canvas の基本 (4)

おい、これは一体何だ?

2 番目のグループでは、CSS 設定を行わずに Canvas タグの属性を使用して幅と高さを設定します。

<canvas width="300"    style="max-width:90%" id="canvas">
        <span>亲,您的浏览器不支持canvas,换个浏览器试试吧!</span>
</canvas>



Canvas API、一般的な Canvas の基本 (4)

明らかに、タグ属性に設定された幅と高さは正常ですが、なぜ CSS は幅と高さ? この奇妙な状況は、キャンバス自体がデフォルトの幅と高さ (幅 300、高さ 150) を持っているために発生します。幅と高さが CSS で設定されている場合、キャンバスはキャンバスの幅が自動的に拡大縮小されると認識します。 , そして、拡大縮小率は cssで設定した幅/300が同じで、高さも同じなので、これでcssで設定した幅が300、高さが300であれば、幅は となることがわかります。スケール = 300/300、高さはスケール = 300/150、高さはスケールされます 当然、高さは 2 倍になりますので、キャンバスのプロパティで幅と高さを設定する必要がある理由です

スケールの話に戻り、スケールの変更プロセスを確認するための動的なチャートを示しましょう:

var timer = null;
ctx.strokeStyle = &#39;red&#39;;
timer = setInterval(function(){
    ctx.beginPath();
    ctx.scale(1.5,1.5);
    ctx.strokeRect(5,5,50,50);
    ctx.closePath();
},500)


Canvas API、一般的な Canvas の基本 (4)

このGIFからわかるように、スケールの変更は、前の図面に基づいて再度スケールすることです。タイマーは元のタイマーに基づいており、一度ズームするとこのようになるはずだと言う人もいますが、パラメーターを設定してから、それを蓄積してゆっくりズームすることはできますか。 、グラフィックが 1 つしかありませんか?

さて、ここで、clearRect() というメソッドについて説明する必要があります。これは、指定された範囲内のスタイルをクリアすることを意味します。ここで必要なグラフィックが 1 つだけの場合、次のグラフィックの描画の前に前の描画をクリアする必要があります。間の時間が非常に短いため、連続的に感じられます。 まず、clearRect() メソッドを紹介します:

clearRect(x,y,w,h) パラメーター: w,y は、長方形の左上隅の座標を表します。クリアする必要がある、w、h クリアする必要がある四角形の幅と高さを表します

パラメータからわかるように、領域がキャンバスに設定されている場合、ローカル領域内のピクセルをクリアできます。キャンバス全体がクリアされます。必要な効果を書きましょう:

var timer = null;
        var num = 1;
        ctx.strokeStyle = &#39;red&#39;;
        timer = setInterval(function(){
            
            if(parseInt(num) >=5){
                clearInterval(timer);
                num =5;    
            }else{
                num +=0.1;
            }
            ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
            ctx.save();
            ctx.beginPath();
            ctx.scale(num,num);
            ctx.strokeRect(5,5,50,50);
            ctx.closePath();
            ctx.restore();
        },500)


Canvas API、一般的な Canvas の基本 (4)

看上图,现在就可以安安静静看它是怎么缩放的了,边距和图形一起缩放,比例也是一样的,这里的效果之所以没有和上面的gif图一样,在上一次缩放的基础上缩放,是因为这一对活宝:save()和restore(),这对活宝上一篇已经讲过了,如果还是不熟悉的同学出门右转,找到API的第3篇,这里的这一对主要功能是保存当前的路径,不被其他的路径污染,这对活宝和clearRect()在做运动的时候是非常有用的,这里终点提示一下!

2、rotate

rotate(angle)  旋转当前绘图  参数:angle表示旋转角度,这里需要填写弧度(弧度和角度的关系,在前面就已经讲过了,不熟悉的同学可以找到API的第2篇)

同样我们看一下css3 rotate的表现:

.box{
    width:50px;
    height:50px;
    border:1px solid #000;
    margin:20px;
}
.box:hover{
    -webkit-transform:rotate(30deg);
}


Canvas API、一般的な Canvas の基本 (4)

可以看到css3的旋转是以中心为原点进行旋转,切接受的参数直接就是角度,而不是弧度,那canvas的rotate的表现是什么呢?

ctx.fillStyle = &#39;red&#39;;
ctx.fillRect(0,0,150,50);
ctx.beginPath();
ctx.rotate(30*Math.PI/180);
ctx.strokeRect(0,0,150,50);
ctx.closePath();


Canvas API、一般的な Canvas の基本 (4)
  红色为初始图形,黑色为旋转图形,这是将图形坐标设置画布左上角的地方的

ctx.fillStyle = &#39;red&#39;;
ctx.fillRect(50,50,150,50);
ctx.beginPath();
ctx.rotate(30*Math.PI/180);
ctx.strokeRect(50,50,150,50);
ctx.closePath();


Canvas API、一般的な Canvas の基本 (4)
  图形坐标设置50,50处

ctx.fillStyle = &#39;red&#39;;
ctx.fillRect(100,100,150,50);
ctx.beginPath();
ctx.rotate(30*Math.PI/180);
ctx.strokeRect(100,100,150,50);
ctx.closePath();


Canvas API、一般的な Canvas の基本 (4)
图形坐标设在100,100处

从这个3组效果中,我们可以得出这样的结论:

1、canvas的旋转原点并不是以自身的中心为原点,而是以画布的左上角为原点,3张图的比较可以看出来

2、图形的旋转原点也不是其自身的中心,而是其左上角为原点

这里说了2个原点,可能不好理解哈,几个例子,比如地球,它即绕太阳转,自己本身也转,那么它让太阳转就是我们说的第一点,图形绕画布旋转,准确的来说,也是图形的左上角绕画布左上角旋转,太阳的自转就是我们说的第2点,它自己本身的旋转,只不过canvas图形中的自转不是以中心为原点的旋转,其中心在左上角,这应该就明白看吧!

3、translate

translate(x,y)  重新映射画布上的 (0,0) 位置,这怎么理解?通俗的将,就是重新定义坐标原点,默认原点是(0,0),用此方法会将原点改成(x,y)

参数:x 添加到水平坐标(x)上的值  y添加到垂直坐标(y)上的值

定义不好理解,那我们就用例子来理解:

ctx.fillRect(10,10,100,100);
//设置新原点
ctx.translate(110,110);
ctx.fillRect(10,10,100,100);


首先我们画了一个100*100的矩形,图形坐标(10,10),因为默认原点是画布左上角,所以此图形在距离左上角(10,10)的位置,理论上说,我们再画一个一模一样的矩形,坐标也一样,2图形是会覆盖的,但是我们现在重新设置原点(110,110),刚好在第一个图形的右下角,这样方便观察,然后再画一个坐标和大小一模一样的矩形,我们来看看效果:

Canvas API、一般的な Canvas の基本 (4)

第二个矩形就刚好是以(110,110)为新的原点,然后距离新原点(10,10)的距离画了一个矩形,恩,这就是translate的作用

css3也是有translate的,我们不妨也来对比一下,下面我写一个css3的translate的例子:

.box{
    width:150px;
    height:150px;
    border:1px solid #000;
    margin:20px;
}
.box:hover{
    -webkit-transform: translate(100px,0);
}


Canvas API、一般的な Canvas の基本 (4)

从gif图可以看出,css3的translate是以自身中心为原点进行平移,但是不会改变原点坐标,所以,canvas的translate跟css3的translate又不一样


4、transform

transform(a,b,c,d,e,f)   替换当前的变换矩阵

参数:

a:水平缩放绘图

b:水平倾斜绘图

c:垂直倾斜绘图

d:垂直缩放绘图

e:水平移动绘图

f:垂直移动绘图

参数很多,但是看这参数的解释,还是很好理解,我们都知道css3的transform是一个集合,其中包含:scale,rotate,translate,skew和matrix,并且其中的matrix(矩阵)是可以转换成前面的任何效果的,换句话说,就是matrix(矩阵)可以包含前面的任何效果,包括自身,而canvas中的transform就是扮演css3的matrix的角色,只是跟css3的效果不一样而已,前面已经对比过了,具体的原理我们在这里就不说了,如果不清楚的,可以看一下css3的matrix是什么个原理,canvas的transform跟他的原理差不多!css3 matrix看这里


scale转成transform公式可得:

context.scale(sx, sy)

缩放我直接用公式来解释:

x’=sx*x

y’=sy*y

(其中,sx 和sy分别表示在x轴和y轴上的缩放倍数,x和y默认为1)

matrix(sx*x,0,0,sy*y,0,0) --> context.transform(sx*x,0,0,sy*y,0,0) -->context.transform(sx,0,0,sy,0,0)

ctx.fillRect(10,10,100,100);
//缩放
ctx.transform(2,0,0,2,0,0);
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);


Canvas API、一般的な Canvas の基本 (4)

rotate转化成transform

rotate(a*Math.PI/180)

公式推导就不推了,直接拿过来了

context.transform(cos(a),sin(a),-sin(a),cos(a),0,0)  (a为角度)

--> context.transform(Math.cos(a*Math.PI/180),Math.sin(a*Math.PI/180),-Math.sin(a*Math.PI/180),Math.cos(a*Math.PI/180),0,0)

ctx.fillRect(10,10,100,100);
//旋转
ctx.transform(Math.cos(30*Math.PI/180),Math.sin(30*Math.PI/180),-Math.sin(30*Math.PI/180),Math.cos(30*Math.PI/180),0,0);
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);



Canvas API、一般的な Canvas の基本 (4)

translate转化成transform

translate(tx,ty)

context.transform(1,0,0,1,tx,ty)

ctx.fillRect(10,10,100,100);
//平移
ctx.transform(1,0,0,1,110,110);
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);



Canvas API、一般的な Canvas の基本 (4)



skew转化成transform

虽然canvas没有skew方法,但是transform依然可以做出来

context.transform(1,tan(ay),tan(ax),1,0,0) (ax,ay表示x方向,y方向的倾斜角度)

-->context.transform(1,Math.tan(ay*Math.PI/180),Math.tan(ax*Math.PI/180),1,0,0)

ctx.fillRect(10,10,100,100);
//倾斜
ctx.transform(1,Math.tan(30*Math.PI/180),Math.tan(30*Math.PI/180),1,0,0)
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);



Canvas API、一般的な Canvas の基本 (4)

那么,如果我想实现平移,旋转,倾斜加放大呢,怎么做?那就分开写呗:

ctx.fillRect(10,10,100,100);
//综合
ctx.transform(1,0,0,1,110,110);//平移
ctx.transform(Math.cos(10*Math.PI/180),Math.sin(10*Math.PI/180),-Math.sin(10*Math.PI/180),Math.cos(30*Math.PI/180),0,0);//旋转
ctx.transform(0.5,0,0,0.5,0,0);//缩放
ctx.transform(1,Math.tan(30*Math.PI/180),Math.tan(30*Math.PI/180),1,0,0);//倾斜
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);


Canvas API、一般的な Canvas の基本 (4)

5、setTransform

setTransform(a,b,c,d,e,f)  当前的变换矩阵重置为单位矩阵,用法与transform相同

参数:

a:水平缩放绘图

b:水平倾斜绘图

c:垂直倾斜绘图

d:垂直缩放绘图

e:水平移动绘图

f:垂直移动绘图

怎么理解这个方法呢?

当我们用transform时,前面的变换方法会影响到后面的变换方法,我们俗称污染,比如:

//缩放
ctx.transform(2,0,0,2,0,0);
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);
ctx.beginPath();
//旋转
ctx.transform(Math.cos(30*Math.PI/180),Math.sin(30*Math.PI/180),-Math.sin(30*Math.PI/180),Math.cos(30*Math.PI/180),0,0);
ctx.fillStyle="green";
ctx.fillRect(10,10,100,100);


前面的一个图形我想让它放大2倍,后面的我不想让它放大,而是想让它旋转30度,结果:

Canvas API、一般的な Canvas の基本 (4)

后面的图形也放大了2倍,这不是我们想要的结果,有人会说,我用save()和restore()不就可以了吗?

//缩放
ctx.save();
ctx.transform(2,0,0,2,0,0);
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);
ctx.restore();
ctx.beginPath();
//旋转
ctx.transform(Math.cos(30*Math.PI/180),Math.sin(30*Math.PI/180),-Math.sin(30*Math.PI/180),Math.cos(30*Math.PI/180),0,0);
ctx.fillStyle="green";
ctx.fillRect(10,10,100,100);


如果你用这2个方法,我就不得不给你赞一个,说明前面的你看进去了

Canvas API、一般的な Canvas の基本 (4)

但是我想说的是,我们有更好的方法,就是我们现在要讲的这个--setTransform

//缩放
ctx.setTransform(2,0,0,2,0,0);
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);
ctx.beginPath();
//旋转
ctx.setTransform(Math.cos(30*Math.PI/180),Math.sin(30*Math.PI/180),-Math.sin(30*Math.PI/180),Math.cos(30*Math.PI/180),0,0);
ctx.fillStyle="green";
ctx.fillRect(10,10,100,100);



Canvas API、一般的な Canvas の基本 (4)

效果跟上面的一样,官方解释是该变换只会影响 setTransform() 方法调用之后的绘图,当然,如果你把transform和setTransform一起混用,那也是会污染的:

//缩放
ctx.setTransform(2,0,0,2,0,0);
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);
ctx.beginPath();
//旋转
ctx.transform(Math.cos(30*Math.PI/180),Math.sin(30*Math.PI/180),-Math.sin(30*Math.PI/180),Math.cos(30*Math.PI/180),0,0);
ctx.fillStyle="green";
ctx.fillRect(10,10,100,100);



Canvas API、一般的な Canvas の基本 (4)

要是把这2方法调个个看看:

//缩放
ctx.transform(2,0,0,2,0,0);
ctx.fillStyle="red";
ctx.fillRect(10,10,100,100);
ctx.beginPath();
//旋转        
ctx.setTransform(Math.cos(30*Math.PI/180),Math.sin(30*Math.PI/180),-Math.sin(30*Math.PI/180),Math.cos(30*Math.PI/180),0,0);
ctx.fillStyle="green";
ctx.fillRect(10,10,100,100);


Canvas API、一般的な Canvas の基本 (4)

看看,效果就又不一样了,所以,在用这些变换方法的时候,必须要弄清楚他们的作用范围和顺序,才能做出我们想要的效果,也不会污染其他的效果,这点,需谨记了!

好了,变换部分就讲完了,感谢大家的关注,如有将的不对的地方,希望能踊跃指正,不甚感谢!

 以上就是canvas API ,通俗的canvas基础知识(四) 的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关文章:

canvas API 介绍,常见的canvas基础知识(一)

canvas API 介绍,常见的canvas基础知识(二)

canvas API 介绍,常见的canvas基础知识(三)

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5:Web開発の新機能と機能H5:Web開発の新機能と機能Apr 29, 2025 am 12:07 AM

H5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。

H5:HTML5の重要な改善H5:HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5:標準とWeb開発への影響HTML5:標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例:実用的なアプリケーションとチュートリアルH5コードの例:実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート:メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス:要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ:ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続:類似性と相違点H5とHTML5の接続:類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素:キー要素とその目的H5コードの構成要素:キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5:一般的な使用法の理解HTML5およびH5:一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5:現代のウェブのビルディングブロック(H5)HTML5:現代のウェブのビルディングブロック(H5)Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール