HTML5画布锯齿代码示例

本文主要介绍了HTML5画布锯齿代码的例子，需要的朋友可以参考下。





设计素描 uff1a

提示：将代码复制到一个HTML文件中并保存它，并直接打开它查看效果。

实现代码：

复制代码代码如下所示：







锯齿图



Window.addEventListener（负荷

功能eventwindowloaded（）{

变量x，y；

VAR之外= document.getelementbyid（画布）；

Var context = theCanvas.getContext (2D);





context.strokestyle =# 00f；

上下文：线宽= 10；

context.strokerect（0, 0，thecanvas.width-0，height-0之外。）；

context.fillstyle =# 00f ；

为（x = 5；x <= canvas.width；x = x + 10）{

Context.beginPath（）；

context.arc（x，5,5,0，Math.PI，假）；

Context.closePath（）；

Context.fill（）；

Context.beginPath（）；

context.arc（x，帆布。height-5,5,0，Math.PI，真的）；

Context.closePath（）；

Context.fill（）；

}

为（y = 5；Y <= canvas.height；Y = y + 10）{

Context.beginPath（）；

context.arc（5，y，0，数学。π×2，真的）；

context.arc（canvas.width-5，y，0，数学。π×2，真的）；

Context.closePath（）；

Context.fill（）；

}

}