怎样用canvas来绘制线条

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来怎样用canvas来绘制线条，用canvas来绘制线条的注意事项有哪些，下面就是实战案例，一起来看一下。

canvas是html5的一个新标签，<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
接下来，我们使用canvas来绘制线条。
首先，新建html文件，并在文件中添加canvas标签，如下所示。

1

2

3

4

5

6

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8"/>

    <title>Canvas绘图与动画基础</title></head><body><style>

    #canvas{        border: 1px solid #aaa;        text-align: center;

    }</style><canvas id="canvas" width="1024" height="768">

    当用户浏览器不支持Canvas,请更换浏览器重试！</canvas></body></html>

若浏览器不支持canvas标签，则canvas标签内的字体会显示，一般情况下，显示canvas内的绘画。
现在，让我们开始画一条线。
首先，得到canvas：

1

var canvas = document.getElementById("canvas");

canvas的宽和高一般不在style内设置，可以在canvas和id同一等级内设置，如上面html内所示，或者使用js设置。

1

2

canvas.width=1014;

 canvas.height=768;

下来，得到绘图的上下文环境

1

var context = canvas.getContext("2d");


我们一般都是使用context来操作canvas，下来，我们在代码里具体学习一下：

阅读剩余部分

相关阅读 >>

炫丽的倒计时效果canvas绘图与动画视频的资源推荐

详细介绍html5 canvas基本绘图之绘制线段代码实例

html5+canvas调用手机拍照功能实现图片上传功能（图文详解下篇）

html5 canvas实现画直线与设置线条的样式

介绍html5+canvas调用手机拍照功能实现图片上传（下篇）

html5canvas save如何保存恢复状态？

使用canvas设计出一个简易的画板

h5 canvas实现圆形动态加载进度实例

如何利用html5 canvas旋转图片？（实例演示）

html5利用canvas绘画二级树形结构图

更多相关阅读请进入《canvas》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...