javascript - applying various line widths to repetitive segmented diagonal lines in one canvas? -
i have written code canvas measuring 1000 800 px. first applied lineair gradient works properly. subsequently wrote code apply diagonal lines in repetitive segments little javascript works fine, because want change/manipulate line width per segment adjust x , y coordinates accordingly per segment. unfortunately line width changes tried apply not work or render expect them to, try alter or manipulate segments applying various line width in range 0,1,2 segments show same line width.
following html code resulting page shows html page starting image try draw in canvas underneath result or can view jpg on milton-chocolate.nl see m trying accomplish in canvas.
furthermore there stylesheet connected have not entered in there yet.
if can kind @ code , if possible solve line width issue ?
kind regards spalburg
<!doctype html><head><link type ="text/css" rel="stylesheet" href="stylesheet.css"/><title>milton-chocolate.nl</title></head><body style="background-color: #3c1007; text-align: center "><img src = "130418-mc.jpg"> <br> <canvas id="mycanvas" width="1000" height="800" style="border: 0px"></canvas> <script> var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); // create gradient var grd = ctx.createlineargradient(0,0,1000,800); grd.addcolorstop(0,"red"); grd.addcolorstop(1,"magenta"); // fill gradient ctx.fillstyle = grd; ctx.fillrect(0,0,1000,800); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 2; (var = -60; < 1000; += 5) { cx.moveto(0+i, 50); cx.lineto(40+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 1; (var = -60; < 1000; += 5) { cx.moveto(0+i, 100); cx.lineto(80+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 150); cx.lineto(120+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 1; (var = -60; < 1000; += 5) { cx.moveto(0+i, 200); cx.lineto(160+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 2; (var = -60; < 1000; += 5) { cx.moveto(0+i, 250); cx.lineto(200+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 300); cx.lineto(240+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 350); cx.lineto(280+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 400); cx.lineto(320+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 450); cx.lineto(360+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 500); cx.lineto(400+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 550); cx.lineto(440+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 600); cx.lineto(480+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 650); cx.lineto(520+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 700); cx.lineto(560+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 750); cx.lineto(600+i, 0); } cx.stroke(); </script> <script> var cx = document.queryselector("canvas").getcontext("2d"); cx.beginpath(); cx.linewidth = 0; (var = -60; < 1000; += 5) { cx.moveto(0+i, 800); cx.lineto(640+i, 0); } cx.stroke(); </script> </body></html>
first off, try re-use code, e.g. defining functions.
your problem beginpath , stroke executed once lines. instead, need each single line, since linewidth updated.
here's jsfiddle implementing (i changed colors line thickness bit make effect more visible).
Comments
Post a Comment