提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【HTML5 提高】Canvas 1

html5 提高 Canvas
2023-09-14 09:00:56 时间 
<!DOCTYPE html>
<html>
<head></head>
    <body>
        <canvas width="500px" height="800px" style="background: yellow" id="canvas">
            Doesn't support canvas
        </canvas>
        <script>
        
        var canvas = document.getElementById('canvas');
        var cxt = canvas.getContext('2d');
        
        //直线
        cxt.beginPath();
        cxt.lineWidth=10;
        cxt.strokeStyle="rgba(0,0,0,0.5)";
        cxt.moveTo(20,20);
        cxt.lineTo(100,20);
        cxt.stroke();
        cxt.closePath();
        
        //圆圈, 凡是路径图形必须先开始路径，画完之后必须结束路径
        cxt.beginPath();
        cxt.arc(200,200,50,0,360,false);
        cxt.stroke();
        cxt.closePath();
        
        
        //实心的圆
        cxt.beginPath();
        //设置填充的颜色
        cxt.fillStyle="red";
        cxt.arc(200,100,50,0,360,false);
        cxt.fill();
        cxt.stroke();
        cxt.closePath();
        
        
        //画一个矩形
        cxt.beginPath();
        cxt.rect(300,20,100,100);
        cxt.stroke();
        cxt.fill();
        //其他方法
        cxt.strokeRect(300,150,100,100);
        cxt.closePath();
        
        //实心矩形
        cxt.beginPath();
        cxt.fillRect(300,270,100,100);
        cxt.closePath();
        
        
        //文字
        cxt.font="40px 黑体";
        cxt.fillText("你好！", 20,300 );
        
        //空心字
        cxt.lineWidth=1;
        cxt.strokeText("你好！", 20,350 );
        
        //画图
        var img = new Image();
        img.src = "xiaomm.jpg";
        img.onload=function(){
            cxt.drawImage(img,20,370,230,306);
        }
        
        
        //画一个三角形
        cxt.beginPath();
        cxt.moveTo(300,500);
        cxt.lineTo(300,600);
        cxt.lineTo(400,550);
        cxt.closePath();
        //cxt.fill();
        cxt.stroke();
        
        
        /*旋转图片*/
        //1. 设置旋转环境
        cxt.save();
        //2. 重置0,0点的位置
        cxt.translate(20,20);
        //图片/形状旋转
        //3. 设置旋转角度, 参数是弧度， 角度到弧度： 角度*Math.PI/180
        cxt.rotate(-45*Math.PI/180);
        //4. 旋转一个线段
        cxt.beginPath();
        cxt.lineWidth=10;
        cxt.moveTo(0,0);
        cxt.lineTo(20,100);
        cxt.stroke();
        cxt.closePath();
        //5. 将旋转之后的元素放回到画图
        cxt.restore();
        
        
        //旋转图片
        cxt.save();
        cxt.translate(20,370);
        cxt.rotate(5*Math.PI/180);
        var img = new Image();
        img.src = "xiaomm.jpg";
        img.onload=function(){
            cxt.drawImage(img,0,0,230,306);
            cxt.restore();
        }        
        </script>
    </body>
</html>

 

相关文章