canvas之一：绘制直线

canvas是html5中最激动人心的技术之一，使用它，可以在浏览器上绘制出各种酷炫的效果，但是呢，千里之行，始于足下，接下来我们就从画一条最简单的直线开始，话不多说，先上效果图：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

canvas.width = 1024;
canvas.height = 768;

context.moveTo(100,100);
context.lineTo(700,700);

context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
}
</script>
</body>
</html>

代码详解：

1.首先我们需要一个<canvas>标签来在浏览器上定义一张画布，id属性是为了让js代码能够找到它，style属性为画布设置一些样式。

2.然后我们要在js中获取这个canvas对象，var canvas = document.getElementById("canvas")这行代码就是啦！

3.接下来再使用var context = canvas.getContext("2d")获取到canvas的绘图上下文，这个东西有什么用呢？以后绘图我们都要通过它来进行哦~

4.我们通过context.moveTo(100,100)把画笔移动到(100,100)这个点开始进行绘制。

5.context.lineTo(700,700)表示在上个点和这个点(700,700)直接画一条直线。

6.context.lineWidth = 5和context.strokeStyle = "red"这两行设置了画笔的一些属性：线条的宽度和颜色。

7.做完以上步骤以后，实际上我们只是设置好了绘制一条直线所需的所有状态，但此时画布上仍然是一片空白，关键的一步在这里：context.stroke()，它实实在在地在画布上画出了一条直线给我们看，感觉很酷炫有木有~

canvas之一：绘制直线相关推荐

java canvas类画直线_canvas教程(二) 绘制直线
经过 canvas 教程(一) 简介我们知道了 canvas 的一些基本情况而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线但是无论是直线还是曲线,我们都 ...
java canvas 画线_canvas教程(二) 绘制直线
经过而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线但是无论是直线还是曲线,我们都应该先了解 canvas 的坐标系 s canvas 的坐标系要绘制之 ...
canvas 绘制直线并选中_在画布中使用路径-Canvas的基本操作
一.在画布中使用路径 beginPath() 新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径moveTo(x, y) 把画笔移动到指定的坐标(x, y).相当于设置路径的起始点坐标 ...
h5的横线_使用HTML5 Canvas绘制直线或折线等线条的方法讲解
HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏 ...
Canvas 绘制直线
Canvas 绘制直线 1.canvas绘图是一种基于状态的绘图,绘图的过程应该是先设置绘图的状态,再调用具体的函数进行绘制. 例如绘制一条(100,100)到(700,700)的直线: contex ...
Canvas小demo(直线和曲线绘制出一个星空，月亮，绿地)
主要包含的知识点: 直线绘制径向渐变(绘制天空井深的情况,由蓝变黑) 五角星数学知识,点与点之间的角度为72deg... 图形变换与状态保存弧线绘制月亮(arc,arcTo) 贝塞尔曲线绘制绿地( ...
Delphi下的GDI+编程[2] DrawLine - 绘制直线
例一效果图: 在GDI+中,绘制直线是通过TGPGraphics类的DrawLine方法实现的,此类的一些方法如下: DrawLine(线条) DrawRectangle(矩形) DrawEllips ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
【HTML5】在canvas上绘制简单的2D图形（+太极图）
canvas(画布) canvas 元素是H5中新增的一个重要元素,专门用来绘制图形.在页面中放置一个canvas元素,就相当于在页面上放置一块画布,可以利用 canvas api 在其中进行图形的描 ...
canvas 文字颜色_一篇图文学会HTML5的canvas标签，直线曲线文字渐变，统统可以有...
什么是 canvas? 通常情况下,我们可以认为和是同一个效果的html元素,他们都是在浏览器显示区域绘制一个矩形的"区域".这个区域我们可以附以选择器进行丰富的显示效果. 但是 ...

canvas之一：绘制直线

canvas之一：绘制直线相关推荐

最新文章

热门文章