怎样用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旋转动画的2个例子

html5中canvas的使用--画线和面

如何使用canvas画出平滑的曲线?（代码）

使用canvas轻松实现黑客帝国炫酷代码雨！！

html5中globalcompositeoperation属性的详细介绍

深入了解html5 canvas标签的基本用法

怎样用canvas来绘制彩色七巧板

在canvas中如何实现自定义路径动画？

htmlcanvas矩形阵雨

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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