webgl旧版 shader注意

小猫佩奇

于 2020-06-22 00:57:51 发布

阅读量192

点赞数

文章标签： canvas html5 js

本文链接：https://blog.youkuaiyun.com/weixin_44127535/article/details/106894298

版权

gl_Position
gl_Position往往需要坐标变换,需要用uniform float u_width,也就是canvas.width,

       "   float x = -1.0 + 2.0*(a_coords.x / u_width);\n" +
       "   float y = 1.0 - 2.0*(a_coords.y / u_height);\n" +

u_width和canvas.width没有int,float的区别,但如果直接除300,就会导致强制转换,x=-1,必须写300.0

gl.drawArrays(gl.LINES, 0,c )
这里c是vertex数目,只与画图结果有关,与之前传递的数据结构无关,两条线就是4,三条就是6
drwa image on canvas from url
先建立img对象,img的src设置成url,然后让finalcanvas画这个img,注意设置完src后不能立刻画,要设置img的onload函数,保证load后再画.代码中canvas只是提供一个url

    var finalcanvas = document.getElementById("finalcanvas");
    var ctx = finalcanvas.getContext("2d");
    let img=document.getElementById("scream");
    img.src=canvas.toDataURL("image/jpg");
    img.onload=function(){
        ctx.drawImage(img, 0, 0);
        drawtext(ctx)
    }