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. 新石器时代码农的Typescript开发总结

    如果评定前端在最近五年的重大突破,Typescript肯定能名列其中,重大到各大技术论坛.大厂面试都认为Typescript应当是前端的一项必会技能.作为一名消息闭塞到被同事调侃成"新石器时 ...

  2. Thinkphp3分析与审计

    0x00 前言: 这篇是去年组内分享的时候给小伙伴写的0基础快速审计tp3系列的文章,主要是对架构做个分析以及审计一些sql注入漏洞~ 现在想想打算放出来,过了一年了,可能里面有一些问题,望看到的大佬 ...

  3. 我的2019年总结和一些2020年的flag

    我的2019年总结和一些2020年的flag 前言 2019年在我的人生中注定是里程碑的一年,主要是我毕业了.本篇总结主要聊一些2019年经历的事以及对于自己2020年的期待 1. 再见2019 1. ...

  4. Apache配置 10. 访问控制-禁止解析PHP

    (1)简述 对于使用PHP语言编写的网站,有一些目录是有需求上传文件的.如果网站代码有漏洞,让黑客上传了一个用PHP写的木马,由于网站可以执行PHP程序,最终会让黑客拿到服务器权限. 为了避免这种情况 ...

  5. linux安装mysql8.0

    linux 上安装mysql8.0 mysql版本8.0.16 MySQL Community 操作系统centos7 准备工作: mysql8.0 rpm文件 安装步骤: 1. 下载mysql的re ...

  6. Androi Studio 之 LinearLayout

    LinearLayout •常用属性 •注意事项 当  android:orientation="vertical"  时, 只有水平方向的设置才起作用,垂直方向的设置不起作用 a ...

  7. c++一些概念

    面向对象语言三大特征: 封装,多态,继承 封装: 1.将函数定义到结构体内部,就是封装. 2.编译器会自动传递结构体的指针给函数. 类: 带有函数的结构体,称为类. 成员函数: 结构体里面的函数,称为 ...

  8. [Kong 与 Konga 与 Postgres数据库] 之 Kuberneres 部署

    1.Kong的概述 Kong是一个clould-native.快速的.可扩展的.分布式的微服务抽象层(也称为API网关.API中间件或在某些情况下称为服务网格)框架.Kong作为开源项目在2015年推 ...

  9. 全网最值得推荐的ELKB日志学习博客-博客地址留存

    博客地址:https://elasticstack.blog.csdn.net/article/details/102728604 博客地址留存,后续解决疑难问题

  10. 1，turicreate入门 - jupyter & turicreate安装

    turicreate入门系列文章目录 1,turicreate入门 - jupyter & turicreate安装 2,turicreate入门 - 一个简单的回归模型 3,turicrea ...