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. 【ZeroMQ】zguide 第一章 部分翻译

    为了更好的阅读体验,请点击这里 本文大部分内容翻译自 Chapter 1 - Basics,原因是之前翻译的版本太老了,不得不亲自披挂上阵拿机器翻译一下.只截取了部分自己可能用得到的,所以如果有看不太 ...

  2. php不使用Office包实现上万条数据导出表格

    经过上传客户要求主副表迁出,又提出可以将某张表的数据导出excel,听着很简单,实际看数据表发现上万条数据,并且需要关联表查询相关字段,导出的表格才可以被客户看明白. 要是使用office包目前后台内 ...

  3. 【资料分享】基于TI Sitara系列AM3352/AM3354/AM3359核心板规格书

    1 核心板简介 创龙科技SOM-TL335x-S是一款基于TI Sitara系列AM3352/AM3354/AM3359 ARM Cortex-A8高性能低功耗处理器设计的低成本工业级核心板,通过邮票 ...

  4. GaussDB(DWS)性能调优，解决DM区大内存占用问题

    本文分享自华为云社区<GaussDB(DWS)性能调优:DM区优化案例--维度表关联条件存在会计期>,作者: O泡果奶~. 当前DM(P1.P3.CBGDM)存在维度表与主表关联时使用会计 ...

  5. Nuxt3 的生命周期和钩子函数（十）

    title: Nuxt3 的生命周期和钩子函数(十) date: 2024/6/30 updated: 2024/6/30 author: cmdragon excerpt: 摘要:本文详细介绍了Nu ...

  6. mysql 授权远程连接

    解决方案 改表法 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 &quo ...

  7. 合合TextIn - 大模型加速器

    TextIn是合合信息旗下的智能文档处理平台,在智能文字识别领域深耕17年,致力于图像处理.模式识别.神经网络.深度学习.STR.NLP.知识图谱等人工智能领域研究.凭借行业领先的技术实力,为扫描全能 ...

  8. MobaXterm是一款功能强大的远程SSH利器，是您远程计算机的终极工具箱

    MobaXterm 是一款功能强大的远程终端应用,可以用于 Windows 系统上的 SSH.Telnet.RDP.VNC 等远程登录.它支持多种会话类型,拥有强大的终端功能,还支持 X11 图形界面 ...

  9. 持久化技术Mybatis知识精讲【形成知识体系篇】

    环境要求 JDK1.8及以上版本 MySQL数据库 Apache Maven 3.6.1构建工具 IDEA/VSCode/Eclipse开发工具任选其一 思维导图:Xmind ZEN 技术要求 熟悉J ...

  10. TS：菜单数组转树形，支持多级（递归）

    方法一 import {menus} from './menus.ts' function listToTree(list: any = [], options = {}, data = null) ...