主要使用的API有:

  • context.moveTo(x,y) 声明线的起始坐标
  • context.lineTo(x,y) 声明线的下一个坐标
  • context.fillStyle  声明线的填充颜色
  • context.fill()  填充
  • context.strokeStyle 声明线的颜色
  • context.stroke() 绘制直线
  • context.beginPath() 声明线的开始
  • context.closePath() 声明线的结束
        var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768; if (canvas.getContext('2d')) {
var context = canvas.getContext('2d');
console.log(context); // CanvasRenderingContext2D // 使用contex进行绘制 // draw a line
context.moveTo(100, 100); // 声明起点,坐标轴是以canvas的左上角为原点
context.lineTo(700, 700); // 声明终点
context.lineTo(100, 700);
context.lineTo(100, 100); context.fillStyle = 'rgb(2, 100, 30)';
context.fill(); // 填充 context.lineWidth = 5; // 声明线的宽度
context.strokeStyle = "red"; // 声明线的颜色
context.stroke(); // 绘制直线 // draw a another line
context.moveTo(200, 100);
context.lineTo(700, 600);
context.strokeStyle = 'black'; // 线条颜色会覆盖之前声明的颜色
context.stroke();
} else {
alert('当前浏览器不支持Canvas,请更换浏览器后再试');
}

结果:

先设置了线的颜色为红色,再设置线的颜色为黑色,但是最后结果,画出来都是黑色的。这是为什么呢?

因为canvas 绘图是基于状态的,下面设置的颜色状态会覆盖上面的设置状态。

那么如何才能画不同颜色的线呢?

要在每一个单独的path前后,使用 context.beginPath() 和 context.closePath()。

        // draw a line
context.beginPath();
context.moveTo(100, 100); // 声明起点,坐标轴是以canvas的左上角为原点
context.lineTo(700, 700); // 声明终点
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();
context.fillStyle = 'rgb(2, 100, 30)';
context.fill(); // 填充 context.lineWidth = 5; // 声明线的宽度
context.strokeStyle = "red"; // 声明线的颜色
context.stroke(); // 绘制直线 // draw a another line
context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
context.closePath(); context.strokeStyle = 'black'; // 线条颜色会覆盖之前声明的颜色
context.stroke();

结果:

Canvas入门02-绘制直线的更多相关文章

  1. canvas教程(二) 绘制直线

    经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...

  2. canvas教程(三) 绘制曲线

    经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...

  3. Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  4. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. canvas绘制直线

    HTML5 <canvas>元素用于图形的绘制,该元素只是图形容器,必须使用javascript脚本绘制图形创建一个画布:<canvas id="myCanvas" ...

  6. 学习Canvas绘图与动画基础 绘制直线(二)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  7. Canvas入门到高级详解(上)

    神奇的 canvas--AICODER 全栈培训 IT 培训专家 一.canvas 简介 1.1 什么是 canvas?(了解) 是 HTML5 提供的一种新标签 <canvas>< ...

  8. Canvas入门(2):图形渐变和图像形变换

    来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...

  9. Html5新特性 &lt;canvas&gt;画板画直线

     以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. vue 无缝滚动文字

    前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...

  2. python语言特性简要记载

    1.python是解释型语言,而c,c++等是编译型语言. 2.python是动态类型语言,这意味着你不需要在声明变量时指定类型. 3.Python是面向对象语言,所有允许定义类并且可以继承和组合.P ...

  3. 【leetcode】1208. Get Equal Substrings Within Budget

    题目如下: You are given two strings s and t of the same length. You want to change s to t. Changing the  ...

  4. 25.复杂链表的复制(python)

    题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...

  5. ubuntu中查看AMD GPU 状态的办法

    lshw -c video 运行命令:glxinfo | grep rendering 如果结果是“yes”,证明显卡驱动已经成功安装. 如果提示有问题,可能是系统里面没有安装mesa-utils,安 ...

  6. GO语言学习笔记5-defer的使用

    1. 什么是defer defer是Go语言提供的一种用于注册延迟调用的机制:让函数或语句可以在当前函数执行完毕后(包括通过return正常结束或者panic导致的异常结束)执行. 2. defer的 ...

  7. List集合中对象的排序

    使用到的是: Collections.sort(); 用法是: List<Book> list_book = new ArrayList<Book>(); Book book= ...

  8. js 获取select的值

    var t = document.getElementById("provid"); console.log(t.value); console.log(t.text); //未定 ...

  9. 一些 sql 调优的总结

    一.sql 优化方案 1)列类型尽量定义成数值类型,且长度尽可能短,如主键和外键,类型字段等等   2)建立单列索引   3)根据需要建立多列联合索引.当单个列过滤之后还有很多数据,那么索引的效率将会 ...

  10. 在vue中结合render函数渲染指定的组件到容器中

    1.demo 项目结构: index.html <!DOCTYPE html> <html> <head> <title>标题</title> ...