canvas标签基础学习记录——HTML5

最新推荐文章于 2024-08-02 20:11:41 发布

些凉

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量193

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_46038474/article/details/121759920

版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <img id="scream" src="/QQ图片20210125153600.png" alt="" height="70" width="140">

    <canvas id="mycanvas" width="200" height="100" style="border: 1px solid chartreuse; "></canvas>

    <script>

        var c=document.getElementById("mycanvas");
            // 找到canvas对象
        var ctx=c.getContext("2d");
            // 创建context对象


        //1.图形绘制
        //     // 矩形填充绘制            
        // ctx.fillStyle="#FF0000";
        // ctx.fillRect(0,0,100,50);
        //     // (x,y,wide height)

        //     // 直线绘制
        // ctx.moveTo(0,0);
        // ctx.lineTo(200,100);
        //     // 开始点
        // ctx.stroke();
        //     // 结束点

        //     // 圆形绘制
        // ctx.beginPath();
        // ctx.arc(95,50,40,0*Math.PI,2*Math.PI);
        // ctx.stroke();
        //     // x,y,r,起始角度，终结角度.0~360度对应,0~2PI
 

        //2.文本绘制
        //     // 空心文本绘制
        // ctx.font="30px Arial";
        // // ctx.fillText("Hello world",10,50)
        //     // 实心文本绘制，相对于画布x,y
        // ctx.strokeText("Hello World",10,50)


        //3.渐变
        //     // 创建线条渐变
        // var grd=ctx.createLinearGradient(0,0,200,0)
        //     // 创建线条渐变（x0,y0,x1,y1）渐变开始及结束位置(相对于矩形)
        // grd.addColorStop(0,"red")
        // grd.addColorStop(1,"white")
        //     // (stop,color),stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
        //     // 填充渐变
        // ctx.fillStyle=grd
        // ctx.fillRect(10,10,150,80)


        //     // 创建一个径向/圆渐变
        // var grd=ctx.createRadialGradient(75,50,5,90,60,100);
        //     // (x0,y0,r0,x1,y1,r1)0开始圆心，1结束圆心，r1结束圆半径
        // grd.addColorStop(0,"red")
        // grd.addColorStop(1,"black")
        //     // 渐变填充矩形
        // ctx.fillStyle=grd
        // ctx.fillRect(10,10,150,80)

        
        //4.填充图像
        //     // 在画布上绘制图像、画布或视频。
        // var img=document.getElementById("scream")
        // img.onload = function() {
    	//     ctx.drawImage(img,0,0,200,100);
        // } 
        //     // (img,x,y,width,height);在画布上放置图像的 x,y 使用的图像的宽度,高度
    </script>
    
</body>
</html>

些凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas标签基础学习记录——HTML5

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt.
复制链接

扫一扫