canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先是擴展canvas的context
比如擴展一個畫五角星的代碼
<!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>CanvasRenderingContext2D.prototype.fillStar = function(r, R, x, y, rot){this.beginPath();for(let i = 0; i < 5; i++){this.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,-Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y);this.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,-Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);}this.closePath();this.fill();}window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "#087";context.fillStar(150, 300, 400, 400, 0);}</script></body> </html>運行截圖如下：
通過CanvasRenderingContext2D.prototype中定義函數可實現擴展。
?
下面是畫橢圓，程序運行截圖如下：
源碼如下：
<!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");if(context.ellipse){context.beginPath();context.ellipse(400, 400, 300, 200, 0, 0, Math.PI * 2);context.stroke();}else{alert("no ellipse");}}</script></body> </html>?
下面是兼容性問題，就是這段代碼：
if(context.ellipse){context.beginPath();context.ellipse(400, 400, 300, 200, 0, 0, Math.PI * 2);context.stroke(); } else{alert("no ellipse"); }如果瀏覽器不支持context.ellipse那么值會為undefined，這樣就會進入else里面。
總結
以上是生活随笔為你收集整理的canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle笔记-Timestamp类型
- 下一篇： Web前端笔记-使用@media（媒体查