1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>03-Canvas线条属性</title>

 6     <style>

 7         *{

 8             margin: 0;

 9             padding: 0;

10         }

11         canvas{

12             background: yellowgreen;

13         }

14     </style>

15 </head>

16 <body>

17 <canvas></canvas>

18 <script>

19     /*

20     1.线条相关属性

21     lineWidth: 线条宽度

22     strokeStyle: 线条颜色

23     lineCap: 线末端类型：(butt默认)、round、square

24     * */

25     let oCanvas = document.querySelector("canvas");

26     let oCtx = oCanvas.getContext("2d");

27     // 修改线条的高度

28     oCtx.lineWidth = 50;

29     // 修改线条的颜色

30     oCtx.strokeStyle = "blue";

31     // 修改线条的两端样式

32     // oCtx.lineCap = "round";

33     // oCtx.lineCap="butt";

34     oCtx.lineCap="square";

35     oCtx.moveTo(50, 50);

36     oCtx.lineTo(200, 50);

37     oCtx.stroke();

38

39     oCtx.moveTo(50,100);

40     oCtx.lineTo(200,100);

41     oCtx.stroke();

42 </script>

43 </body>

44 </html>

03-canvas线条属性的更多相关文章

  1. canvas线条实践之运动的正方形

    原理说明: 1.通过rect实现正方形的绘制: 2.save保存canvas面板的保存,restore回复保存的canvas面板到初始状态: 3.translate用于改变canvas坐标的起始位置: ...

  2. C# 拓展ComboBox设置线条属性(转)

    C# 拓展ComboBox设置线条属性目前由于项目需要,要实现线条属性设置的功能,就如Visio中点击线端时,可以弹出一个窗口设置线条的各种属性. 其中线条属性选择时,是在ComboBox控件中,显示 ...

  3. C# Wpf 后台代码设定UIElement的Canvas位置属性值

    后台in-code设定元件UIElement的Canvas位置属性的两种方法: 1.UIElement.SetValue()方法 uiElement.SetValue(Canvas.TopProper ...

  4. canvas线条的属性

    一.线条的帽子lineCap 取值:butt(默认值),round圆头,square方头 var canvas=document.getElementById("canvas"); ...

  5. canvas绘图详解笔记之线条及线条属性

    创建 canvas 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: <canvas id="canvas">当前浏览器不支持canvas,请 ...

  6. canvas一些属性

    lineTo(x,y) 定义线条结束坐标 moveTo(x,y) 定义线条开始坐标 ctx.stroke();绘制空心图形 ctx.fill();填充图形 把当前路径环绕起来的区域进行填充 ctx.f ...

  7. canvas常用属性方法由浅下沉

    首先引入<canvas></canvas>标签就不必说了. 其次就是得到canvas的2d环境了( var ctx = canvasDom.getContext('2d') ) ...

  8. canvas画布属性globalAlpha 和 createRadialGradient函数出现的设置问题

    今天用canvas做了一个页面特效,呼呼,在做的过程中发现createRadialGradient 和 globalAlpha这2个属性一起使用导入不能实现透明度问题,首先把createRadialG ...

  9. canvas 线条不清楚的问题

    对于canvas 画出的1px线条不清楚的问题, 一般是坐标点+0.5像素的问题, 但是有时要考虑viewpoint的问题,让canvas的width = 980,同时viewpoint = 980 ...

  10. [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

随机推荐

  1. Ajax分析方法

    Ajax 分析方法 以前面的微博为例,拖动刷新的内容由 Ajax 加载,而且页面的 URL 没有变化,那么应该到哪里去查看这些 Ajax 请求呢? 查看请求 需要借助浏览器的开发者工具,下面以 Chr ...

  2. WebUI测试-获取html页面表格数据并存到Excel中

    from selenium.webdriver.support import expected_conditions as EC import pandas as pd table=WebDriver ...

  3. Controller-runtime模块

    Controller-runtime框架 Controller-runtime是社区提供的用于开发Controller的框架,包含了各种已封装的代码库.Kubebuilder与Operator SDK ...

  4. 记录一下第一次webSocket通信成功

    webSocket前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. SQL注入攻击及防御

    SQL注入攻击及防御 1.项目实验环境 目标靶机OWASP_Broken_Web_App_VM_1.2: https://sourceforge.net/projects/owaspbwa/files ...

  6. 含税168元起！四核A53+NPU+PCIe+USB3.0，瑞芯微RK3562性价比真高！

     

  7. 为什么说这款99元国产ARM工业平台，具有“划时代”意义

    随着近年来进口处理器涨价不断,大家会发现市面上已很少见到99元的ARM工业核心板出售. 为满足客户对低成本.高性能的需求,创龙科技推出基于全志T113-i国产ARM工业处理器的"划时代&qu ...

  8. 全网最适合入门的面向对象编程教程：13 类和对象的Python实现-可视化阅读代码神器Sourcetrail的安装使用

    全网最适合入门的面向对象编程教程:13 类和对象的 Python 实现-可视化阅读代码神器 Sourcetrail 的安装使用 摘要: 本文主要介绍了可视化阅读代码神器Sourcetrail的安装与使 ...

  9. ELK Stack - Elasticsearch · 搜索引擎 · 部署应用 · 内部结构 · 倒排索引 · 服务接入

    系列目录 ELK Stack - Elasticsearch · 搜索引擎 · 全文检索 · 部署应用 · 内部结构 · 倒排索引 · 服务接入 ELK Stack - Kibana (待续) ELK ...

  10. oeasy教您玩转python - 001 - # 换行插入

    ​ 先跑起来 Python 什么是 Python? Python 很好用 适合初学者 而且在各个领域都很强大 ​ 后来居上 ​ 上图可以点开 python3 早已有之 最终逆风翻盘 当然 java 也 ...