WebGL(三)——学习Canvas及简单图形绘制

WebGL(三)——学习Canvas及简单图形绘制

Canvas简介

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

更多关于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>

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

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值