-
var tangram=[ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"green"}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"red"}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"yellow"}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"blue"}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"pink"}, {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"black"}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"gray"} ]; window.onload=function(){ var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); for(var i=0;i<tangram.length;i++){ draw(tangram[i],context); } } function draw(piece,cxt){ cxt.beginPath(); cxt.moveTo(piece.p[0].x,piece.p[0].y); for(var i=1;i<piece.p.length;i++){ cxt.lineTo(piece.p[i].x,piece.p[i].y); } cxt.closePath(); cxt.fillStyle=piece.color; cxt.fill(); }查看全部
-
context.beginPath(); context.moveTo(30, 10); context.lineTo(230, 200); context.strokeStyle = "blue";//绘制的状态 context.closePath(); context.stroke(); } else { alert("请更换浏览器"); } }查看全部
-
window.onload = function () { var canvas = document.getElementById("canvas"); context = canvas.getContext("2d");//context绘图所需要的接口 canvas.width=300; canvas.height = 400; if(context) { context.beginPath(); context.moveTo(10, 10);//绘制的状态 context.lineTo(200, 200);//绘制的状态 context.lineTo(10, 200);//绘制的状态 context.lineTo(10, 10);//绘制的状态 context.lineWidth = 5;//绘制的状态 context.strokeStyle = "yellow";//绘制的状态 context.fillStyle = "purple"; context.fill(); context.closePath(); context.stroke();查看全部
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Canvas绘图</title> <script src="../jquery-1.11.1.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); canvas.width=300; canvas.height = 400; if(context) { } else { alert("请更换浏览器"); } } </script> </head> <body> <canvas id="canvas" ></canvas> </body> </html>查看全部
-
canvas.getContext('2d')绘图的上下文缓冲环境查看全部
-
<!DOCTYPE html> <html> <body> <canvas id="canvas" ></canvas> </body> </html> <script> window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 1024; canvas.height = 765; if (canvas.getContext("2d")) { var context= canvas.getContext("2d"); context.beginPath(); context.moveTo(100,100); context.lineTo(700,700); context.lineTo(100,700); context.lineTo(100,100); context.closePath(); context.fillStyle = "blue"; context.fill(); context.lineWidth = 5; context.strokeStyle = "red"; context.stroke(); context.beginPath(); context.moveTo(200,100); context.lineTo(700,600); context.closePath(); context.strokeStyle = "yellow"; context.stroke(); } else { alert("浏览器不支持canvas"); } } </script>查看全部
-
context.arc(centerx, centery, radius, startingAngle, endingAngle, anticloclwise = false)查看全部
-
点阵 : 1 .arc 的 j*2*(RADIUS+1)+(RADIUS+1) J 是列(点阵二维数组里面的值), J* 2*... = 正方形,从而得出这个列的位置 ,也就是arc函数里面的X位置 // y+i*2*(RADIUS+1)+(RADIUS+1) i 是行,(点阵一维数组),i*2*( =正方形,从而得出这个位置的第几行 一定要理解清楚点阵和数字的关系查看全部
-
var tangram=[ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"green"}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"red"}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"yellow"}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"blue"}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"pink"}, {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"black"}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"gray"} ]; window.onload=function(){ var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); for(var i=0;i<tangram.length;i++){ draw(tangram[i],context); } } function draw(piece,cxt){ cxt.beginPath(); cxt.moveTo(piece.p[0].x,piece.p[0].y); for(var i=1;i<piece.p.length;i++){ cxt.lineTo(piece.p[i].x,piece.p[i].y); } cxt.closePath(); cxt.fillStyle=piece.color; cxt.fill(); }查看全部
-
/** * 初始化加载 */ window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; if(canvas.getContext("2d")){ var ctx = canvas.getContext("2d"); for(var i = 0; i < tangram.length; i++){ draw(tangram[i],ctx); } }else{ alert("当前浏览器不支持canvas，请更换浏览器后再试！"); } } /** * 绘制 * @param {Object} piece * @param {Object} ctx */ function draw(piece,ctx){ ctx.beginPath(); ctx.moveTo(piece.p[0].x,piece.p[0].y); for(var i = 1; i < piece.p.length; i++){ ctx.lineTo(piece.p[i].x,piece.p[i].y); } ctx.closePath(); ctx.fillStyle = piece.color; ctx.fill(); }查看全部
-
//定义七巧板的七个模块的顶点坐标 var tangram = [ {p:[{x:0,y:0},{x:0,y:800},{x:400,y:400}],color:"#caff67"}, {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#67becf"}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:200}],color:"#ef3d61"}, {p:[{x:600,y:200},{x:800,y:400},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"}, {p:[{x:400,y:400},{x:600,y:600},{x:200,y:600}],color:"#a594c0"}, {p:[{x:0,y:800},{x:400,y:800},{x:600,y:600},{x:200,y:600}],color:"#fa8ecc"}, {p:[{x:400,y:800},{x:800,y:800},{x:800,y:400}],color:"#f6ca29"} ];查看全部
-
如果出现多个路径，可以使用ctx.beginPath()和ctx.closePath()进行处理。。。查看全部
-
context.arc(centerx,centery,radius,startingAngel,endingAngel,anticlockwise=false); centerx和centery是圆心的x和y坐标， radius是圆的半径， startingAngel和endingAngel是开始弧度和结束弧度， anticlockwise = false为顺时钟绘制，默认为顺时钟(false)可选参数; beginPath()重新绘制路径 closePath()结束路径，如果路径没有闭合，则用直线闭合路径； 如果不需要封闭弧，则只用beiginPath即可。 closePath对fill不起作用；查看全部
-
context.arc(centerx, centery, radius, startingAngle, endingAngle, anticloclwise = false)查看全部
-
七巧板 定义变量 tangram=[]，里面有七个部分（七巧板的七块） 每一个部分是类的对象：包括p（顶点坐标也是一个数组）和color 拿到canvas，定义canvas的宽和高 取得context 循环七巧板变量数组 遍历数组,每次遍历调用draw() draw(七巧板中的一块，绘图的上下文环境) function draw（piece，cxt）{ cxt.beginPath(); cxt.moveTo(piece.p[0].x,piece.p[0].y); for(var i=1;i<piece.p.length;i++){ cxt.lineTo(piece.p[i].x,piece.p[i].y) } cxt.closePath(); cxt.fillStyle=piece.color; cxt.fill(); }查看全部
举报
0/150
提交
取消