H5 Canvas 的绘制图形

web前端游戏开发面试题|前端开发需要阅读的书籍|前端开发使用的软件下载

代码片段 1

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>Html5-Canvas</title>
</head>
<body>
    <canvas width=”500″ height=”800″ id=”canvas” style=”background:#FC0;”>
        此浏览器不支持canvas,建议换更高级的浏览器查看。
    </canvas>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“canvas”);
        var context = canvas.getContext(‘2d’);
        //直线版
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();
        context.fillStyle = ‘rgb(100,255,100)’;
        context.strokeStyle = ‘rgb(0,0,100)’;
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;
        for (var i = 0; i < 30; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx + x * s, dy + y * s);
        }
        context.closePath();
        context.fill();
        context.stroke();
    </script>
</body>
</html>

代码片段 2

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>Html5-Canvas</title>
</head>
<body>
    <canvas width=”500″ height=”800″ id=”canvas” style=”background:#FC0;”>
        此浏览器不支持canvas,建议换更高级的浏览器查看。
    </canvas>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“canvas”);
        var context = canvas.getContext(‘2d’);
        //曲线版
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();
        context.globalCompositeOperation = ‘and’;
        context.fillStyle = ‘rgb(100,255,100)’;
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;
        context.moveTo(dx, dy);
        for (var i = 0; i < 30; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.bezierCurveTo(dx + x * s, dy + y * s + 50, dx + x * s – 50, dy + y * s, dx + x * s, dy + y * s);
        }
        context.closePath();
        context.fill();
        context.stroke();
    </script>
</body>
</html>

代码片段 3

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>Html5-Canvas</title>
</head>
<body>
    <canvas width=”500″ height=”800″ id=”canvas” style=”background:#FC0;”>
        此浏览器不支持canvas,建议换更高级的浏览器查看。
    </canvas>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“canvas”);
        var context = canvas.getContext(‘2d’);
        //渐变图形-线性渐变
        var g1 = context.createLinearGradient(0, 0, 0, 300);
        g1.addColorStop(0, ‘rgb(255,255,0)’);
        g1.addColorStop(1, ‘rgb(0,255,255)’);
        context.fillStyle = g1;
        context.fillRect(0, 0, 400, 300);
        var n = 0;
        var g2 = context.createLinearGradient(0, 0, 300, 0);
        g2.addColorStop(0, ‘rgba(0,0,255,0.5)’);
        g2.addColorStop(1, ‘rgba(255,0,0,0.5)’);
        for (var i = 0; i < 10; i++) {
            context.beginPath();
            context.fillStyle = g2;
            context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
            context.closePath();
            context.fill();
        }
    </script>
</body>
</html>

代码片段 4

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>Html5-Canvas</title>
</head>
<body>
    <canvas width=”500″ height=”800″ id=”canvas” style=”background:#FC0;”>
        此浏览器不支持canvas,建议换更高级的浏览器查看。
    </canvas>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“canvas”);
        var context = canvas.getContext(‘2d’);
        //渐变图形-径向渐变
        var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
        g1.addColorStop(0.1, ‘rgb(255,255,0)’);
        g1.addColorStop(0.3, ‘rgb(255,0,255)’);
        g1.addColorStop(1, ‘rgb(0,255,255)’);
        context.fillStyle = g1;
        context.fillRect(0, 0, 400, 300);
        var n = 0;
        var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
        g2.addColorStop(0.1, ‘rgba(255,0,0,0.5)’);
        g2.addColorStop(0.7, ‘rgba(255,255,0,0.5)’);
        g2.addColorStop(1, ‘rgba(0,0,255,0.5)’);
        for (var i = 0; i < 10; i++) {
            context.beginPath();
            context.fillStyle = g2;
            context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
            context.closePath();
            context.fill();
        }
    </script>
</body>
</html>

代码片段 5

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>Html5-Canvas</title>
</head>
<body>
    <canvas width=”500″ height=”800″ id=”canvas” style=”background:#FC0;”>
        此浏览器不支持canvas,建议换更高级的浏览器查看。
    </canvas>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“canvas”);
        var context = canvas.getContext(‘2d’);
        //图形的变形
        context.fillStyle = “#EEEEFF”;
        context.fillRect(0, 0, 400, 300);
        // 图形绘制
        context.translate(200, 50);
        context.fillStyle = ‘rgba(255,0,0,0.25)’;
        for (var i = 0; i < 50; i++) {
            context.translate(25, 25);
            context.scale(0.95, 0.95);
            context.rotate(Math.PI / 10);
            context.fillRect(0, 0, 100, 50);
        }
    </script>
</body>
</html>

代码片段 6

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>Html5-Canvas</title>
</head>
<body>
    <canvas width=”500″ height=”800″ id=”canvas” style=”background:#FC0;”>
        此浏览器不支持canvas,建议换更高级的浏览器查看。
    </canvas>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“canvas”);
        var context = canvas.getContext(‘2d’);
        //五角星
        context.translate(50, 50);
        for (var i = 0; i < 1; i++) {
            context.translate(25, 25);
            context.scale(0.95, 0.95);
            context.rotate(-Math.PI / 190 * 30);
            create5Star(context);
            context.stroke();
        }
        function create5Star(context) {
            var dx = 50;
            var dy = 50;
            var s = 100;
            context.beginPath();
            context.strokeStyle = ‘rgba(255,0,0,0.5)’;
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 5 * 4;
            for (var i = 0; i < 5; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.lineTo(dx + x * s, dy + y * s);
            }
            context.closePath();
        }
    </script>
</body>
</html>

代码片段 7

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>Html5-Canvas</title>
</head>
<body>
    <canvas width=”500″ height=”800″ id=”canvas” style=”background:#FC0;”>
        此浏览器不支持canvas,建议换更高级的浏览器查看。
    </canvas>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“canvas”);
        var context = canvas.getContext(‘2d’);
        //图像组合
        var oprtns = new Array(
            “source-over”,//默认值,表示新图形覆盖在原有图形之上。
            “source-atop”,//在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
            “source-in”,//在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。
            “source-out”,//在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。
            “destination-atop”,//在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
            “destination-in”,//在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。
            “destination-out”,//在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。
            “destination-over”,//在源图像上方显示目标图像。
            “lighter”,//原有图形与新图形均绘制,重叠部分做加色处理。
            “copy”,//显示源图像。忽略目标图像。
            “xor”//只绘制新图形中与原有图形不重叠的部分,重叠部分变成透明。
        );
        i = 10; //读者可自行修改该参数来显示想要查看的组合效果
        //绘制原有图形(蓝色长方形)
        context.fillStyle = “blue”;
        context.fillRect(10, 10, 60, 60);
        //设置组合方式,从组合的参数数组中挑选组合方式,此处因为i是8,所以选择oprtns数组中第9(数组从0开始计算)个组合方式lighter
        context.globalCompositeOperation = oprtns[i];
        //设置新图形(红色圆形)
        context.beginPath();
        context.fillStyle = “red”;
        context.arc(60, 60, 30, 0, Math.PI * 2, false);
        context.fill();
        //动画版图形组合
        var globalId;
        var i = 0;
        setInterval(Composite, 1000);
        function Composite() {
            var oprtns = new Array(
                “source-atop”,
                “source-in”,
                “source-out”,
                “source-over”,
                “destination-atop”,
                “destination-in”,
                “destination-out”,
                “destination-over”,
                “lighter”,
                “copy”,
                “xor”
            );
            if (i > 10) i = 0;
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.save();
            //绘制原有图形(蓝色长方形)
            context.fillStyle = “blue”;
            context.fillRect(10, 10, 60, 60);
            //设置组合方式
            context.globalCompositeOperation = oprtns[i];
            //设置新图形(红色圆形)
            context.beginPath();
            context.fillStyle = “red”;
            context.arc(60, 60, 30, 0, Math.PI * 2, false);
            context.fill();
            context.restore();
            i = i + 1;
        }
    </script>
</body>
</html>

代码片段 8

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>Html5-Canvas</title>
</head>
<body>
    <canvas width=”500″ height=”800″ id=”canvas” style=”background:#FC0;”>
        此浏览器不支持canvas,建议换更高级的浏览器查看。
    </canvas>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“canvas”);
        var context = canvas.getContext(‘2d’);
        //阴影
        context.shadowOffsetX = -10;
        context.shadowOffsetY = -10;
        context.shadowColor = ‘rgba(250,0,0,0.5)’;
        context.shadowBlur = 7.5;
        context.translate(0, 50);
        for (var i = 0; i < 3; i++) {
            context.translate(50, 50);
            create5Star(context);
            context.fill();
        }
        function create5Star(context) {
            var dx = 100;
            var dy = 0;
            var s = 50;
            //创建路径
            context.beginPath();
            context.fillStyle = ‘rgba(255,0,0,0.5)’;
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 5 * 4;
            for (var i = 0; i < 5; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.lineTo(dx + x * s, dy + y * s);
            }
            context.closePath();
        }
    </script>
</body>
</html>

前端开发面试题 gihub|前端开发需要逻辑|前端开发哪个软件好

» 本文来自:前端开发者 » 《H5 Canvas 的绘制图形》
» 本文链接地址:https://www.rokub.com/4880.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!