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. 一款.NET开源的i茅台自动预约小助手

    前言 今天大姚给大家分享一款.NET开源.基于WPF实现的i茅台APP接口自动化每日自动预约(抢茅台)小助手:HyggeImaotai. 项目介绍 该项目通过接口自动化模拟i茅台APP实现每日自动预约 ...

  2. CAP 8.2 版本发布通告

    前言 今天我们很高兴宣布 CAP 发布 8.2 版本正式版,我们在这个版本中主要致力于对订阅着并行执行的特性提供支持,同时添加了对在订阅者中对消息头的控制行为. 下面,具体看一下我们新版本的功能吧. ...

  3. paraview安装

    apt 安装 sudo apt install paraview 安装包安装 参考 https://blog.csdn.net/weixin_47492286/article/details/1272 ...

  4. Linux 应用案例开发手册——基于Zynq-7010/20工业开发板

    目 录 1 开发案例说明 4 2 Linux 常用开发案例 4 2.1 tl_led_flash 案例 4 2.2 tl_key_test 案例 7 2.3 tl_can_echo 案例 11 2.4 ...

  5. CF1860

    很失败啊 A 题大力分讨,罚了 \(2\) 次 B 题大力分讨,罚了 \(1\) 次 C 题大力 dp 一发过 然后就睡觉了 感觉 CF 打少了智商掉了,被前几题拖了太久

  6. spring cloud 上云的情况下，Ribbon 客户端负载均衡 与 ALB 服务端负载均衡的选择

    在云环境(例如AWS)中,由于云提供商通常提供强大的负载均衡服务(如AWS的ALB),一般不再需要使用Ribbon这种客户端负载均衡方案.云环境中的负载均衡器通常能够提供更高的可靠性.可扩展性和简化的 ...

  7. 痞子衡嵌入式：浅聊恩智浦i.MXRT官方SDK里关于串行Flash相关的驱动与例程资源(上篇)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MXRT官方SDK里关于串行Flash相关的驱动与例程资源. 经常有同事以及 i.MXRT 客户咨询痞子衡,咱们恩智浦官方 S ...

  8. 解决方案 | Citrix Receiver无法正常启动的多种解决方案

    下面是个人在实践过程中总结的解决办法: 方案1:卸载Citrix Receiver(一般通过控制面板卸载,如果正常无法卸载则需要通过官方卸载软件ReceiverCleanupUtility软件卸载), ...

  9. Webpack3.x升级至 4.x 小记

    近期项目部署遇到点问题,需要升级webpack版本,特此整理一小记,记录升级过程中的依赖包及报错处理. 本次升级的依赖包及对应版本对照表: npm 包 当前版本 升级版本 S/D vue ^2.5.1 ...

  10. Notepad++实现代码格式化

    NotePad++是一个轻量级的代码编辑器,占用内存少,运行速度快,Notepad++本身是不带这个格式化功能的,但他支持NppAStyle插件完成格式化. 1. 下载插件NppAStyle.dll, ...