WebGL（三）——学习Canvas及简单图形绘制

qq_51550750

已于 2022-03-16 23:07:34 修改

阅读量1.4k

点赞数

文章标签：学习 javascript html

于 2022-03-16 23:06:57 首次发布

本文链接：https://blog.csdn.net/qq_51550750/article/details/123534853

版权

WebGL（三）——学习Canvas及简单图形绘制

Canvas简介

canvas是HTML5新增的一个可以使用javascript脚本在其中绘制图像的ＨＴＭＬ元素（容器），它可以用来制作图像、动画，甚至可以进行实时视频处理和渲染，也包括我们的三维影像。

更多关于Canvas的学习资料可以关注公众号“小东方不败”进行获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<!--    绘制矩形-->
    <div>
        <h1>绘制矩形</h1>
        <canvas id="myCanvas01" width="200" height="100" style="border: 1px solid black">
        </canvas>
    </div>
    <div>
        <h1>绘制路径</h1>
        <canvas id="myCanvas02" width="200" height="100" style="border: 1px solid black">
        </canvas>
    </div>
    <div>
        <h1>绘制圆形</h1>
        <canvas id="myCanvas03" width="200" height="100" style="border: 1px solid black">
        </canvas>
    </div>
    <div>
        <h1>绘制文本</h1>
        <canvas id="myCanvas04" width="200" height="100" style="border: 1px solid black">
        </canvas>
    </div>
    <div>
        <h1>绘制渐变</h1>
        <canvas id="myCanvas05" width="200" height="100" style="border: 1px solid black">
        </canvas>
    </div>
    <div>
        <h1>绘制图像</h1>
        <img src="./1.png" alt="The Scream" id="scream" style="display: none">
        <canvas id="myCanvas06" width="1000" height="800" style="border: 1px solid black">
        </canvas>
    </div>
    <script>
        //矩形
        let c_1 = document.getElementById("myCanvas01");
        //获取画布上下文
        let ctx_1 = c_1.getContext("2d");
        ctx_1.fillStyle = 'green';
        ctx_1.fillRect(0,0,150,75);
        //路径
        let c_2 = document.getElementById("myCanvas02");
        let ctx_2 = c_2.getContext("2d");
        ctx_2.moveTo(0,0);  //起点
        ctx_2.lineTo(200,100);   //终点
        ctx_2.stroke();   //画线
        //圆形
        let c_3 = document.getElementById("myCanvas03");
        let ctx_3 = c_3.getContext("2d");
        ctx_3.beginPath()  //开始绘制路径
        ctx_3.arc(95,50,40,0,2*Math.PI)   //绘制圆形
        ctx_3.stroke()
        //文本
        let c_4 = document.getElementById("myCanvas04");
        let ctx_4 = c_4.getContext("2d");
        ctx_4.font = '30px Arial'
        ctx_4.fillText("Hello WebGL",10,50);  //后面两个参数是坐标
        //渐变
        let c_5 = document.getElementById("myCanvas05");
        let ctx_5 = c_5.getContext("2d");
        let grd = ctx_5.createLinearGradient(0,0,200,0);  //渐变的  起始点前两个位置，结束坐标后两个位置
        grd.addColorStop(0,"red")
        grd.addColorStop(1,"white");
        ctx_5.fillStyle=grd;   //填充
        ctx_5.fillRect(10,10,150,80);
        //图像
        let c_6 = document.getElementById("myCanvas06");
        let ctx_6 = c_6.getContext("2d");
        let img = document.getElementById("scream");
        window.onload = function (){
            ctx_6.drawImage(img,10,10);
        }


    </script>
</body>
</html>

页面效果：
在这里插入图片描述

在这里插入图片描述

qq_51550750

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGL（三）——学习Canvas及简单图形绘制

WebGL（二）——学习Canvas及简单图形绘制Canvas简介canvas是HTML5新增的一个可以使用javascript脚本在其中绘制图像的ＨＴＭＬ元素（容器），它可以用来制作图像、动画，甚至可以进行实时视频处理和渲染，也包括我们的三维影像。更多关于Canvas的学习资料可以关注公众号“小东方不败”进行获取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫