HTML画布01

最新推荐文章于 2022-09-04 16:17:06 发布

AbandonU

最新推荐文章于 2022-09-04 16:17:06 发布

阅读量299

点赞数 1

分类专栏： HTML5 文章标签： HTML5 canvas

本文链接：https://blog.csdn.net/qq_36620767/article/details/83033781

版权

本文介绍了HTML5的canvas元素，强调canvas并非直接绘图，而是通过JavaScript进行操作。讲解了canvas的默认尺寸设定，如何用js修改尺寸，并提供了解决浏览器不支持canvas的替代内容方法。重点阐述了获取绘图上下文的必要性，特别是`getContext('2d')`和`getContext('3d')`的区别。接着，详细讨论了在2d环境中绘制直线的方法，包括`moveTo`、`lineTo`、`stroke`和`strokeStyle`的使用，以及渐变赋值方式。

摘要由CSDN通过智能技术生成

canvas 本身没有绘图能力，所有的绘图都由js完成，常用js的getElementById获得canvas(标签id)

注：

1.若canvas未设置高度，浏览器默认设置为300*100px，且不能使用css设置(会被拉伸)

js设置：a.width=200;a.height=100;(a为canvas对象)

2.如浏览器不支持canvas功能，可在标签中写一些替换内容eg:<canvas>你的浏览器不支持</canvas>

getContext()：该方法是canvas的绘图对象/方法,canvas执行绘图前，必须获取该对象。

注：

1.getContext("2d")表示该canvas的绘图环境为2d平面(可绘制文本、直线、弧线、矩形、圆形等)

2.getContext("3d")表示……为3d

直线:

<script type="text/javascript">

    var c=document.getElementById("xx");

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

    ctx.moveTo(10,10);

    ctx.lineTo(150,50);

    ctx.stroke();

</s