是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制线段方法,感兴趣的小伙伴们可以参考一下
是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。
只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在
1.获取
以下是一个简单的
XML/HTML Code复制内容到剪贴板
- >
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>canvas绘图演示title>
- <style type="text/css">
- #canvas{
- border: 1px solid #ADACB0;
- display: block;
- margin: 20px auto;
- }
- style>
- head>
- <body>
- <canvas id="canvas" width="300" height="300">
- 你的浏览器还不支持canvas
- canvas>
- body>
- <script type="text/javascript">
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- //设置对象起始点和终点
- context.moveTo(10,10);
- context.lineTo(200,200);
- //设置样式
- context.lineWidth = 2;
- context.strokeStyle = "#F5270B";
- //绘制
- context.stroke();
- script>
- html>
如果
以上就是HTML5 canvas基本绘图之绘制线段的详细内容,更多请关注0133技术站其它相关文章!