【HTML5 提高】Canvas 1

复制代码
<!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>
复制代码

 

posted @   Zhentiw  阅读(154)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae