1 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4    <meta charset="UTF-8">

 5    <title>绘制直线</title>

 6 </head>

 7 <body>

 8    <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;">

 9      当前浏览器不支持Canvas,请更换浏览器

10    </canvas>

11    <script>

12       var canvas=document.getElementById('canvas');

13       canvas.width=1024;

14       canvas.height=768;//也可以在这里设置width和height

15       var context=canvas.getContext('2d');

16       //使用context进行绘制

17

18       context.moveTo(100,100);

19       context.lineTo(700,700);

20       context.lineTo(100,700);

21       context.lineTo(100,100);

22       context.lineWidth=5;

23       context.strokeStyle="#005588";

24       context.stroke();

25    </script>

26    <!--

27       1.context.moveTo(100,100);和context.lineTo(700,700);//状态设置

28       2.context.stroke();//绘制

29       3.context.lineWidth=5;//设置线条的宽度

30       4.context.strokeStyle="#005588";//线条样式，主要指颜色

31     -->

32 </body>

33 </html>

学习Canvas绘图与动画基础 绘制直线（二）的更多相关文章

  1. 学习Canvas绘图与动画基础 绘制多条路径（四）

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

  2. 学习Canvas绘图与动画基础 制作弧和圆（五）

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

  3. 学习Canvas绘图与动画基础 为多边形着色（三）

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

  4. 学习Canvas绘图与动画基础 canvas入门（一）

    一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta char ...

  5. canvas-炫丽的倒计时效果Canvas绘图与动画基础

    canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...

  6. 炫丽的倒计时效果Canvas绘图与动画基础

    前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...

  7. 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

    源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  9. WPF学习之绘图和动画

    如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是 ...

随机推荐

  1. add_header被覆盖 -配置错误

    Nginx的配置文件分为Server.Location.If等一些配置块,并且存在包含关系,和编程语言比较类似.如果在外层配置的一些选项,是可以被继承到内层的. 但这里的继承也有一些特性,比如add_ ...

  2. Kilo 使用教程

    写了这么多篇 WireGuard 相关的保姆教程,今天终于牵扯到 Kubernetes 了,不然怎么对得起"云原生"这三个字.如果看到这篇文章的你仍然是个 WireGuard 新手 ...

  3. 【工具】 memtester内存压力测试工具

    作者:李春港 出处:https://www.cnblogs.com/lcgbk/p/14497838.html 目录 一.简介 二.Memtester安装 三.使用说明 四.测试示例 一.简介 mem ...

  4. Java 运行时数据区和内存模型

    运行时数据区是指对 JVM 运行过程中涉及到的内存根据功能.目的进行的划分,而内存模型可以理解为对内存进行存取操作的过程定义.总是有人望文生义的将前者描述为 "Java 内存模型" ...

  5. 键盘--扫描码--ASCII码--显示器上的字符

    在上一篇,我讲了键盘操作会产生扫描码以及如何解析Pause键和Print Screen键的扫描码. 在这一篇,我会说清楚"键盘上的输入为什么会出现在显示器上". 极简版 我们敲击键 ...

  6. [THUPC2019] 找树

    一.题目 点此看题 二.解法 这道题很离谱啊,看上去是求一个最大值,其实是把生成树权值为 \(i\) 的个数都给算出来,因为权值很小. 既然是生成树可以考虑矩阵树定理,我们考虑他是求这样一个式子: \ ...

  7. 解决linux sudo apt-get install xx是2出现无法定位软件包方法

    解决办法: 在etc/apt/sources.list最后一行添加 deb http://archive.ubuntu.com/ubuntu/ trusty main universe restric ...

  8. js_笔记_8月7日记录_活动对象_作用域链_按值传递

    活动对象:简单说就是这个函数的参数和显示声明的变量或函数. 函数内接受的参数实际是创建了一个局部变量:[形参名] = [传进来的值],js的函数传参只传值. 作用域链:执行流进入一个函数,会先创建出作 ...

  9. Python基础之数据类型详解

    为什么会有数据类型? 在介绍具体的数据类型之前,需要了解为什么需要区分数据类型.我们知道,一个公司会有很多个大的部门,每个部门下又会有许多细分的小部门,构成了公司的完整体系结构.如果把python的数 ...

  10. springboot+druid报错log4j:WARN No appenders could be found for logger (druid.sql.Connection). log4j:WARN Please initialize the log4j system properly.

     解决方案:新建文件log4j.properties log4j.rootLogger=DEBUG, stdout log4j.appender.stdout=org.apache.log4j.Con ...