canvas笔记-clip裁剪函数的使用及探照灯实例
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-clip裁剪函数的使用及探照灯实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在canvas中有clip函數，也就是裁剪，從原始畫布中剪切任意形狀和尺寸。
?
如下例子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.fillStyle = "black";context.fillRect(0, 0, canvas.width, canvas.height);context.beginPath();context.strokeStyle = "green";context.arc(400, 400, 150, 0, Math.PI * 2);context.stroke();context.font = "bold 150px Arial";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "#058";context.fillText("CANVAS", canvas.width / 2, canvas.height / 2);}</script></body> </html>程序運行截圖如下：
添加clip代碼后運行截圖如下：
源碼如下:
<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.fillStyle = "black";context.fillRect(0, 0, canvas.width, canvas.height);context.beginPath();//context.strokeStyle = "green";context.arc(400, 400, 150, 0, Math.PI * 2);//context.stroke();context.clip();context.font = "bold 150px Arial";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "#058";context.fillText("CANVAS", canvas.width / 2, canvas.height / 2);}</script>?
下面記錄下探照燈的例子：
程序運行截圖如下，那個探照燈的圓是會動的。
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>let searchLight = {x: 400,y: 400,radius: 150,vx: Math.random() * 5 + 10,vy: Math.random() * 5 + 10}window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");setInterval(function(){draw(context);update(canvas.width, canvas.height);}, 40)}function draw(cxt){let canvas = cxt.canvas;cxt.clearRect(0, 0, canvas.width, canvas.height);cxt.save();cxt.beginPath();cxt.fillStyle = "black";cxt.fillRect(0, 0, canvas.width, canvas.height);cxt.beginPath();cxt.arc(searchLight.x, searchLight.y, searchLight.radius, 0, Math.PI * 2);cxt.fillStyle = "#fff";cxt.fill();cxt.clip();cxt.font = "bold 150px Arial";cxt.textAlign = "center";cxt.textBaseline = "middle";cxt.fillStyle = "#058";cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 4);cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 2);cxt.fillText("CANVAS", canvas.width / 2, canvas.height * 3 / 4);cxt.restore();}function update(canvasWidth, canvasHeight){searchLight.x += searchLight.vx;searchLight.y += searchLight.vy;if(searchLight.x - searchLight.radius <= 0){searchLight.vx = -searchLight.vx;searchLight.x = searchLight.radius;}if(searchLight.x + searchLight.radius >= canvasWidth){searchLight.vx = -searchLight.vx;searchLight.x = canvasWidth - searchLight.radius;}if(searchLight.y - searchLight.radius <= 0){searchLight.vy = -searchLight.vy;searchLight.y = searchLight.radius;}if(searchLight.y + searchLight.radius >= canvasHeight){searchLight.vy = -searchLight.vy;searchLight.y = canvasHeight - searchLight.radius;}}</script></body> </html>這里說明下實現的邏輯，碰撞檢測，清空畫布方面的不提了。
就提下這個draw。
這里是先繪制出了一個全黑的矩形，這個矩形和畫布一樣大。然后再繪制一個圓，這個圓是白色的，然后裁剪，這樣的畫，顯示的時候就只會顯示圓。然后就搞3個canvas字繪制到畫布上。再加上運動效果，就變成探照燈實例了。
總結
以上是生活随笔為你收集整理的canvas笔记-clip裁剪函数的使用及探照灯实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IDA笔记-IDA Pro基本使用
- 下一篇： Java笔记-DH密钥交换获取密钥及AE