html5之canvas标签应用之 2d图形绘制以及图片绘制

最新推荐文章于 2025-02-24 14:42:02 发布

GitHub轮子工厂

最新推荐文章于 2025-02-24 14:42:02 发布

阅读量886

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： canvas 标签图片图形

本文链接：https://blog.youkuaiyun.com/lzp492782442/article/details/41879573

html5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用HTML5的Canvas元素进行基本图形绘制，包括直线、三角形、矩形和圆形等，并演示了如何在Canvas上显示一张图片。









<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <canvas style="border: 1px solid red" width="400px" height="400px" id="can1">


    </canvas>
    <script type="text/javascript">

        //1得到画布
        var canvas1 = document.getElementById("can1");
        //2得到上下文引用  画笔
        var cxt =  canvas1.getContext("2d")
        //3画出直线
        cxt.moveTo(20,20);
        cxt.lineTo(20,90);
        //画出直线
        cxt.stroke();

        /****画出一个填充的三角形--->路径****/
        //开始新路径
        cxt.beginPath();
        cxt.moveTo(40,20);
        cxt.lineTo(40,90);
        cxt.lineTo(80,90);
        //闭合路径   画了三个点  闭合起来  连起来
        cxt.closePath();
        cxt.fill();//实心的
        //cxt.stroke();//空心的

        /**画出矩形**/
        cxt.strokeRect(100,20,70,70);//空心矩形
        //改变画笔的style
        cxt.fillStyle="red";
        cxt.fillRect(200,20,70,70);//实心的矩形

        /**画出圆形**/
        cxt.fillStyle="blue"
        cxt.beginPath();
        cxt.arc(270,40,20,0,360,true);
        cxt.closePath();
       // cxt.stroke();
        cxt.fill();

        /**画出图片**/
        //1创建image对象
        var img1 = new Image();
        img1.src="apple-touch-icon-precomposed.png";
       //加载完毕后再绘制图形
        img1.onload=function(){
            cxt.drawImage(img1,20,100,200,150);
        }



    </script>

</body>
</html>