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. 记录vue和js操作——尽管很快实现了功能，可总感觉到不爽

    需求产生的原因是:后端有一些数据是从旧平台直接迁移过来的,新平台需要根据迁移过来的数据,自动生产新的数据格式. 操作符有如下几种,分项.支路和数字配合操作符可以自定义组合,例如 [0000000000 ...

  2. WAV音频文件按秒切片段

    wav音频文件按秒切片段 import wave def split_wav_by_seconds(input_file, output_file, start_second, end_second) ...

  3. c语言生成随机数

    记录示例,留作自用 #include <stdio.h> #include <stdlib.h> #include <time.h> int main(void) ...

  4. python 自动化神器 多平台纯代码RPA办公自动化python框架

    ​ Pyaibote是一款专注于纯代码RPA(机器人流程自动化)的强大工具,支持Android.Browser和Windows三大主流平台.无论您需要自动化安卓应用.浏览器操作还是Windows应用程 ...

  5. Zabbix 5.0 LTS URL 健康监测

    更多细节详情看[zabbix官方文档] 需求 Zabbix 的URL健康监测功能允许你检测 Web 地址是否可用.正常工作以及响应速度.这对于监控网站的可用性和性能非常有用.例如,你可以监控公司网站. ...

  6. 解决方案 | 在 Tkinter 中导入 pywinauto/pyautogui 时窗口大小发生变化

    上面问题也可以换一个说法,pywinauto/pyautogui 时改变了tkinter的原有的窗口大小.这个问题困扰了我好几天而且网上有这样的问题但是并没有答案,今天摸索出答案给大家分享下.解决方法 ...

  7. oeasy教您玩转vim - 76 - # Session会话

    ​ 会话session 回忆组合键映射的细节 上次我们定义了一系列的复合键 主要是和ctrl键一起 快速跳转window窗口 map <c-j> <c-w>j map < ...

  8. Volatile不保证原子性及解决方案

    原子性的意义 原子性特别是在并发编程领域,是一个极其重要的概念,原子性指的是一个操作或一组操作要么全部执行成功,要么全部不执行,不会出现部分执行的情况.这意味着原子性操作是不可分割的,它们在执行过程中 ...

  9. Week 0

    Day 0 我8:00与lsh前往济南,在大约11:40左右抵达济南高铁站. 等高铁期间,我在庞大的济南高铁站中找到了我心心念念的而DY却没有的赛百味三明治,买了27的西式火腿三明治和34的香烤牛肉三 ...

  10. layout文本相关

    Textview t=findViewById(R.id.t); ONE设置文本内容: 在XML中android:text直接写 在java中setText()中修改 注意点1继承appcompata ...