HTML页面用canvas绘制红色圆点

最新推荐文章于 2024-08-15 10:23:35 发布

猴子的时光机

最新推荐文章于 2024-08-15 10:23:35 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/houbucea/article/details/109311274

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

/**
 * canvas绘制红色圆点
 * @param x,y 绘制需要的屏幕坐标
 * @param fx 旋转角度，默认传输 0 即可
 * @param ctx 绘制面板上下文
 */

function (x,y,fx,ctx) {

    if(!this.newimagedataJbz){
        var newimagedata =ctx.createImageData(8,8);
        var imageArr = [0,0,0,0,186,55,41,37,190,59,46,173,190,58,47,241,190,58,47,241,190,59,46,173,186,55,41,37,0,0,0,0,190,59,46,39,192,63,51,239,227,170,165,255,250,241,240,255,250,241,240,255,227,170,165,255,192,63,51,239,190,59,46,39,190,59,46,173,227,170,164,255,237,199,195,255,197,78,67,255,197,78,67,255,237,199,195,255,225,164,158,255,190,59,46,173,190,58,47,241,250,241,240,255,197,78,67,255,191,59,47,255,191,59,47,255,197,78,67,255,250,241,240,255,191,59,46,243,190,58,47,241,250,241,240,255,197,78,67,255,191,59,47,255,191,59,47,255,197,77,67,255,250,241,240,255,191,59,46,243,190,59,46,173,227,170,164,255,236,198,195,255,197,77,67,255,198,80,69,255,236,198,195,255,225,164,159,255,190,59,46,173,185,57,45,40,192,63,51,239,227,170,165,255,251,242,241,255,251,242,241,255,227,170,165,255,192,63,51,239,185,57,45,40,0,0,0,0,190,59,46,39,190,59,46,173,191,58,46,242,191,58,46,242,190,59,46,173,190,59,46,39,0,0,0,0];
        for(var i=0;i<256;i++){
            newimagedata.data[i]=imageArr[i];
        }
        newimagedataJbz = newimagedata;
    }
    width=8;
    height=8;
    ctx.translate(x,y);
    ctx.rotate(fx);
    ctx.putImageData(self.newimagedataJbz,x-width*0.5,y-height*0.5);
    ctx.setTransform(1,0,0,1,0,0);

}