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及画椭圆及浏览器兼容问题相关推荐

canvas笔记-使用canvas画圆及点阵的使用
如下例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
canvas笔记-使用canvas画矩形及各样式（透明）
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
canvas笔记-在canvas中使用其他HTML元素
这里使用的原理是使用css把div中关于html的元素通过布局位置,以及透明相关的设置,将其设置到canvas上,这样看起来就是在canvas绘制的按钮.然后使用JavaScript获取按钮的数据或者 ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
canvas笔记-画一个五角星（含算法）
算法如下: 上面的图是正三角形: 说下算法,关于上面那些x,y是怎么算出来的. 这里大圆的5个顶点,每个顶点占用的角度为360/5 = 72度,左边那个18度是通过90 - 72 = 18度. 大圆半 ...
canvas笔记-画三角形并计算其外心（含算法其他绘图框架类似）
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
canvas笔记-画一片星空
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
Silverlight学习笔记三(鼠标点击动态画直线|动态设置Ellipse的Canvas.Top与Canvas.Left|动态设置Stroke属性的方法。)...
我有可能需要把AutoCAD的部分功能搬到浏览器上,先练习一下画直线的方法.如图: MainPage.xaml代码: 大气象 <UserControl x:Class="DrawLin ...
canvas笔记-clip裁剪函数的使用及探照灯实例
在canvas中有clip函数,也就是裁剪,从原始画布中剪切任意形状和尺寸. 如下例子: <!DOCTYPE html> <html lang="en"> ...

canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题

canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题相关推荐

最新文章

热门文章