-
beginPath 清空之前的状态 beginPath + lineTo = moveTo查看全部
-
beginPath()相当于moveTo的作用,可省略moveTo()查看全部
-
context.closePath(); 解决 线段缝隙问题 不过现在context.lineCap = "square";也可以解决查看全部
-
更好的方法绘制图形 哈哈查看全部
-
rect矩形 哈哈查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <canvas id="canvas" > 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100,350); context.lineTo(500,350); context.lineTo(500,200); context.lineTo(700,400); context.lineTo(500,600); context.lineTo(500,450); context.lineTo(100,450); context.closePath(); context.lineWidth = 10; context.fillStyle = "yellow"; context.strokeStyle = "#058"; context.fill(); context.stroke(); } </script> </body> </html> 先填充,再绘制,查看全部
-
可以在五角星内外画圆。通过圆来获取内外顶点坐标查看全部
-
在脚本.js输入中文时.html使用<meta charset="gb2313">才能显示中文用<meta charset="UTF-8">出现多个?替代查看全部
-
五角星顶点位置的计算查看全部
-
arcTo(x1,y1,x2,y2,r) 就是从当前path坐标点到(x1,y1)的联线与(x1,y1)到(x2,y2)的联线的夹角与半径为300(本例)不用考虑圆点座标,该线段长就是圆与2切线的切点之间弧长查看全部
-
线条的宽度和样式查看全部
-
以下为reimg.js代码 window.onload = function(){ var canvas = document.getElementById("canvas") //通过Id("canvas")与画布连接,必须 canvas.width = 800 //画布宽 canvas.height = 800 //画布高 var context = canvas.getContext("2d") //设置画布上下文环境,必须 var image = new Image() image.src = "bar-code_256x256.png" image.onload = function(){ var pattern = context.createPattern(image ,"repeat"); context.fillStyle = pattern; context.fillRect( 0 , 0 , 800 , 800 ); } } 以下为index.html代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style ="divplay:block;margin:0 auto;border:1px solid #aaa;"><!--显示画布框架--> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas> <script src="reimg.js"></script> </body> </html>查看全部
-
画月亮查看全部
-
miterlimit查看全部
-
settransform:去掉之前的所有tranform查看全部
举报
0/150
提交
取消