Canvas绘制图形图像

最新推荐文章于 2024-04-20 16:29:18 发布

happyChen2016

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量490

点赞数

分类专栏： HTML 文章标签： Canvas

本文链接：https://blog.csdn.net/liwb1987/article/details/46813049

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //矩形
        function drawRect(id)
        {
            var canvas = document.getElementById(id);
            var content = canvas.getContext("2d");
            content.fillStyle = "#FF0000";//定义填充色
            content.fillRect(0,0,200,200);//定义起点0,0 宽200 高200
        }
        //线条
        function drawLine(id)
        {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            context.moveTo(50,50);//定义线条起点
            context.lineTo(100,50);//从起点开始移动
            context.lineTo(50,50);//从上面的终点开始移动
            context.stroke();
        }

        //三角形
        function drawLineThree(id)
        {
            //获取Canvas对象(画布)
            var canvas = document.getElementById(id);
            //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
            if(canvas.getContext){
                //获取对应的CanvasRenderingContext2D对象(画笔)
                var ctx = canvas.getContext("2d");

                //开始一个新的绘制路径
                ctx.beginPath();
                //设置线条颜色为蓝色
                ctx.strokeStyle = "blue";
                //设置填充色
                ctx.fillStyle = "red";
                //设置路径起点坐标
                ctx.moveTo(20, 50);
                //绘制直线线段到坐标点(60, 50)
                ctx.lineTo(20, 100);
                //绘制直线线段到坐标点(60, 90)
                ctx.lineTo(70, 100);
                //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
                ctx.closePath();
                //填充颜色
                ctx.fill();
                //最后，按照绘制路径画出直线
                ctx.stroke();
            }

        }

        //圆
        function drawArc(id)
        {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            //定义径向渐变色
            var rg =context.createRadialGradient(50, 50, 0, 50, 50, 20);
            rg.addColorStop(0,'red');
            rg.addColorStop(0.5,'yellow');
            rg.addColorStop(1,'blue');
            context.fillStyle = rg;//定义填充色
            context.beginPath();
            /*cx  水平坐标
            cy  垂直坐标
            radius  半径
            start-angel  圆周起始位置
            end_angle  弧长 Math.PI是半圆  Math.PI*2是整个圆  0.5为四分之一
            direction 顺、逆时针  false为逆时针，true为顺时针（决定了圆弧的方向）*/
            context.arc(50,50,20,0,Math.PI*2,true);
            context.closePath();
            context.fill();
        }

        //横向渐变
        function drawLinearGradient(id)
        {
            var c=document.getElementById(id);
            var cxt=c.getContext("2d");
            var grd=cxt.createLinearGradient(0,0,175,50);
            grd.addColorStop(0,"#FF0000");
            grd.addColorStop(1,"#00FF00");
            cxt.fillStyle=grd;
            cxt.fillRect(0,0,175,50);
        }

        //图像
        function drawImg(id)
        {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            var img = new Image();
            img.src = "1.png";
            //html5在使用drawImage绘图的时候，出现不显示的问题，原来要想是图片正常显示需要为图片添加一个onload事件
            img.onload = function(){
                context.drawImage(img,100,100);
            }
            context.drawImage(img,100,100);
        }

    </script>
</head>
<body οnlοad="drawRect('canvasid')">
    <canvas id="canvasid" width="500" height="500"></canvas>
</body>
</html>