canvas抗锯齿,html canvas开发详解

　　效果图：

　　提示：把代码复制到一个超文本标记语言文件中并保存，直接打开即可看到效果。

　　实现代码：复制代码代码如下：声明文档类型

　　html lang=zh

　　头

　　meta charset=gbk

　　标题锯齿图/标题

　　脚本类型=文本/javascript

　　window.addEventListener(load ，eventWindowLoaded，false)；

　　函数eventWindowLoaded(){

　　var x，y；

　　var画布=文档。getelementbyid(“canvas”)；

　　var上下文=画布。获取上下文(“2d”)；

　　//框

　　context.strokeStyle= # 00f

　　context.lineWidth=10

　　context.strokeRect(0，0，Canvas.width-0，画布。高度-0)；

　　context.fillStyle= # 00f

　　for(x=5；x=画布。宽度；x=x 10){

　　语境。begin path()；

　　上下文. arc(x，5，5，0，数学。圆周率，假);

　　语境。关闭路径()；

　　语境。fill()；

　　语境。begin path()；

　　context.arc(x，canvas.height-5，5，0，Math .PI，真);

　　语境。关闭路径()；

　　语境。fill()；

　　}

　　for(y=5；y=canvas.heighty=y 10){

　　语境。begin path()；

　　上下文. arc(5，y，5，0，数学* 2，真);

　　context.arc(canvas.width-5，y，5，0，Math .PI*2，真);

　　语境。关闭路径()；

　　语境。fill()；

　　}

　　}

　　/脚本

　　/头

　　身体

　　div style= position:absolute；顶部：100像素；左：100像素；

　　画布id=画布宽度=300 高度=300

　　/div

　　/body

　　/html

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。