HTML基础6

简介： 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"

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

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

效果：