canvas的使用大全
admin
2023-07-31 00:40:06
0


    
        
    
    
        function pageLoaded(){


            var canvas = document.getElementById('testcanvas');//得到画布
            var context = canvas.getContext('2d');//得到绘图环境  参数为绘图环境的类型

            //画一个实心矩形
            var oldFillStyle = context.fillStyle;
            context.fillStyle = 'red';
            context.fillRect(0,0,100,100);
            context.fillStyle = oldFillStyle;

            context.save();//保存context的当前状态
            //画一个空心矩形
           // var oldStrokeStyle = context.strokeStyle;
            context.strokeStyle = 'rgb(155,0,0)'
            context.strokeRect(0,101,100,100);
            //context.strokeStyle = oldStrokeStyle;
            context.restore();//还原context的状态

            //清除指定的矩形区域 使透明
            context.clearRect(25,25,50,50);

            //闭合路径
            context.beginPath();//开始绘制一个新路径
            context.moveTo(105,0);//将画笔移到指定点
            context.lineTo(200,50);//从当前点绘制一条直线到指定点
            context.lineTo(105,100);
            context.closePath();//闭合路径
            context.stroke();//绘制空心形状


            context.beginPath();
            context.moveTo(105,105);
            context.lineTo(200,155);
            context.lineTo(105,205);
            context.closePath();//闭合路径
            context.fill();//填充形状

            context.beginPath();
            context.arc(160,300,50,0,Math.PI,true);//画弧
            context.stroke();

            oldStrokeStyle = context.strokeStyle;
            context.beginPath();
            context.fillStyle = 'rgba(155,0,0,0.6)';//设置颜色 同时设置透明度
            context.arc(160,300,30,0,2*Math.PI,true);//画弧
            context.fill();

            context.font = '30px Arial';
            context.strokeText('how are you', 405,20);

            context.font = '30px Arial';
            context.fillText('how are you', 405,60);

            var p_w_picpath = document.getElementById('tank');
            context.drawImage(p_w_picpath,600,0);

            context.drawImage(p_w_picpath,600,0,100,100);
            context.drawImage(p_w_picpath,200,200,50,50,600,100,100,100);


            context.translate(650,250);
            context.rotate(Math.PI/2);
            context.drawImage(p_w_picpath,-50,-50,100,100);
            context.rotate(-Math.PI/2);
            context.translate(-650,-250);

        }
    
    
        

        
        
    


相关内容

热门资讯

上半年菲律宾发生7起涉中国公民... 2026年上半年,在菲律宾共发生涉及中国公民绑架案7起,与去年同期相比下降36%。主要案情如下:2月...
亲绿媒体人矢板明夫被殴案嫌疑人... 海峡导报综合报道 日裔媒体人、“印太战略智库”执行长矢板明夫昨天(6日)在台中永丰栈酒店演讲,结束后...
“每座发电厂都将不复存在”,特... 据凤凰卫视报道,美国总统特朗普7月6日在椭圆形办公室回答记者提问时表示,希望与伊朗达成协议,但若谈判...
留美履历被曝造假,高市早苗回应 据“日刊体育”7月6日报道,日本首相高市早苗在周一的参院决算委员会上,就其在美国期间自称“美国联邦议...
日、新、澳等国对中国潜射导弹试... 据凤凰卫视报道,7月6日,俄罗斯总统新闻秘书佩斯科夫在媒体会上就中国导弹试验及俄中联合演习等涉华议题...
巴洛贡红牌禁赛暂缓执行引爆舆论... 新华社美国西雅图7月6日电(记者肖世尧、公兵)6日,针对国际足联纪律委员会作出的美国队前锋福拉林·巴...
最高领袖穆杰塔巴,被传现身哈梅... “我们失去了一个父亲”,伊朗已故最高精神领袖哈梅内伊的送葬仪式上,许多民众痛哭、捶胸哀悼,手举伊朗国...
山西长治市长陈向阳辞职,任上发... 记者从山西省长治市人大获悉,7月6日,长治市第十五届人大常委会召开第三十五次会议,决定接受陈向阳辞去...
空调为什么正用着呢就自动关机了 首先可能是因为使用遥控器提前设置了定时关机,或者是启动了睡眠模式,导致其自动关机,这种情况只需检查遥...
美的空调自动开关机是怎么回事 1、比较常见的是由于室内机的温度控制器出现了损坏,就会在使用的过程当中出现这种自动开关机的问题。2、...