Canvas の Clip() メソッドは、元の Canvas から任意の形状とサイズを切り取るために使用されます。領域がクリップされると、それ以降のすべての描画はクリップされた領域に制限されます (キャンバス上の他の領域にはアクセスできません)。
また、clip() メソッドを使用する前に save() メソッドを使用して現在のキャンバス領域を保存し、後で、restore() メソッドを通じていつでも復元することもできます。
次に、clip() メソッドを使用して、サーチライト効果を実現します。
</iframe><button id=btn>変形</button><button id=con>一時停止</button><canvas id=canvas width=400 height=290 style=border:1px Solid black>現在のブラウザでは、キャンバスをサポートしています。ブラウザを変更して再試行してください。</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == '一時停止'){ this.innerHTML = 'resume'; }else{ this.innerHTML = '一時停止' }} var Canvas = document.getElementById('canvas'); //ストレージ キャンバスの幅と高さ var H=290,W=400; //ストレージ サーチライト var ball = {}; // ストレージ写真 var IMG; // ストレージ写真アドレス var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; .getContext){ var cxt = Canvas.getContext('2d'); var tempR = Math.floor(Math.random()*30+20); = Math.floor(Math.random()*(W-tempR) + tempR); var tempY = Math.floor(Math.random()*(H-tempR) + tempR) ボール = { x:tempX, y: tempY, r:tempR, stepX:Math.floor(Math.random() * 21 -10), stepY:Math.floor(Math.random() * 21 -10) }; IMG = document.createElement('img'); IMG.onload = function(){ cxt.drawImage(IMG,0,0);スタック開発交換 サークルで一緒に学び、コミュニケーションしましょう: 582735936 ]//1 ～ 3 人のフロントエンド担当者向け} //技術的なボトルネックを突破し、思考スキルを向上させるのに役立ちます} } } function update(){ ball.x += ボール.ステップX; ボール.y += ボール.ステップY; 関数バンプテスト(ele){ //左側 if(ele.x <= ele.r){ ele.x = ele.r ; ele.stepX = -ele.stepX; } //右側 if(ele.x >= W - ele.r){ ele.stepX = -ele.stepX } //上側 if(ele.y <= ele.r){ ele.y = ele.stepY = -ele.stepY } //下側 if(ele.y >= H - ele.r; ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} function render(){ //キャンバスをクリアする効果を得るためにキャンバスの高さをリセットします。 if(canvas.getContext){ var cxt = Canvas.getContext('2d'); cxt.save(); //キャンバスの背景を黒くします cxt.fillStyle = '#000'; 0,0,W,H); //サーチライトをレンダリング cxt.beginPath(); cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI); cxt.fillStyle = '#000'; cxt.clip(); use Clip() を使用しない場合、キャンバスの背景画像は Clip() 領域に表示されます。 cxt.drawImage(IMG,0,0); }//一緒に学び、コミュニケーションを図るためのフルスタック開発交流サークルへの参加を歓迎します: 582735936 ]//1 ～ 3 人のフロントエンド担当者向け} //技術的なボトルネックの突破と思考スキルの向上に役立ちます}}Initial();clearInterval (oTimer); function fnInterval( ){ //モーションステータスを更新します update() } var oTimer = setInterval(fnInterval,50);以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。