HTML5笔记

最新推荐文章于 2021-05-13 07:33:50 发布

Minam SU

最新推荐文章于 2021-05-13 07:33:50 发布

阅读量86

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/sinat_39070454/article/details/88027277

版权

前端学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.canvas标签

参考资料
HTML5 Canvas（菜鸟教程）

canvas——文本

<canvas id="myCanvas" width="600" height="130" style="border:2px solid purple;">
</canvas>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle='red';
    ctx.font="30px 幼圆";
    ctx.fillText("世界",20,40);
</script>

注： ctx.fillStyle=‘red’;不能加在fillText后面，不能显示。

在这里插入图片描述
canvas——文字渐变

<canvas id="myCanvas" width="400" height="100" style="border:2px solid yellow;">
</canvas>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"purple");
    grd.addColorStop(1,"white");

    // 填充渐变
    ctx.fillStyle=grd;
    ctx.font="50px 宋体";
    ctx.fillText("世界",20,60);
</script>

在这里插入图片描述

canvas——图片

<body>
<p>Image to use:</p>
<img id="scream" src="xx/xx.jpg" alt="The Scream" width="216" height="108"><p>Canvas:</p>
<canvas id="myCanvas" width="1080" height="540" style="border:2px solid yellow;">
</canvas>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");

    img.onload = function() {
        ctx.drawImage(img,10,10);
    }
</script>

</body>

在这里插入图片描述

2.内联SVG

SVG教程 http://www.runoob.com/svg/svg-tutorial.html

Minam SU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5笔记

1.canvas标签元素用于图形的绘制，通过脚本（一般为js）来完成。标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。HTML5 Canvas（菜鸟教程）...
复制链接

扫一扫

专栏目录