当前位置:网站首页 > 网站建设教程 > HTML教程 > 正文

HTML基础6

教程管理员 发布于2023-09-30 22:15 HTML教程 131

简介: HTML基础6

1.定义

一块矩形画布,可以控制其中的每一像素

2.原理

通过控制每一个像素进行绘制,通过每一帧的绘制及更新达到动画的效果

3.准备


<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
    var canvas = document.getElementById('myCanvas') //【DOM获取canvas节点】
    var ctx = canvas.getContext('2d');  //【绘制2D图像】
</script>

4.例子


A.先建立canvas元素

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element. // 作为浏览器不支持Canvas时的提示
</canvas>

可以参考HTML canvas参考文档

例如现在要绘制一个HELLO WORLD

可以先设置字体的样式,属性

ctx.font="30px Arial";

具体的语法:语法:ctx.font = "font-style font-variant font-weight font-size/line-height font-family"



image


通过设置 ctx.fillStyle = "color",调用 ctx.fillText(str,startX,startY) 方法进行绘制

ctx.fillStyle = "blue" / "#0000ff"
ctx.fillText("Hello World",10,50);

效果:

image


琼ICP备09004296号-12