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. Java面试知识点（一）多态

    多态概述 1. 定义 多态就是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用在编程时并不确定,而是在程序运行期间才确定,即一个引用变量倒底会指向哪个类的实例对象,该引用变量发出的 ...

  2. Nginx配置文件nginx.conf中location的匹配原则

    一.空格:默认匹配.普通匹配 location / { root /home; } 二.= :精确匹配(表示匹配到  /home/resources/img/face.png 这张图片) locati ...

  3. FreeRtos学习总结

    背景 最近项目需要,花了几天时间学习了FreeRTOS,因为之前有操作系统和底层的基础,所以上手非常快. 正文 基础篇 学习方法:建议先阅读本人整理的文章:再结合FreeRTOS文档官方的全英文档&l ...

  4. P6631 [ZJOI2020] 序列题解

    难度:困难 主要算法:贪心 题目链接:https://www.luogu.com.cn/problem/P6631 解题思路 简化问题:定义直线为覆盖ai,ai+1,ai+2 的操作,跳线为覆盖ai, ...

  5. windows下rust环境的安装（现在是2023年5月份）

    在自己家电脑上安装一下rust,还是遇到一些问题,这里记录一下,免得后面再踩坑. 官方网站 获取主要信息还得靠官网,比如安装软件:) 地址是 https://www.rust-lang.org/zh- ...

  6. 韦东山freeRTOS系列教程之【第十章】软件定时器(software timer)

    目录 系列教程总目录 概述 10.1 软件定时器的特性 10.2 软件定时器的上下文 10.2.1 守护任务 10.2.2 守护任务的调度 10.2.3 回调函数 10.3 软件定时器的函数 10.3 ...

  7. typora markdown笔记

    前言 此为个人markdown笔记,不定时更新. 正文 1. mermaid 使用 横向流程图 源码 graph LR a(起始)-->b(中间) b-->c1<-->d b- ...

  8. Docker部署JavaWeb项目(Tomcat环境)

    一.环境准备 1.首先准备一台Centos 7的虚拟机并安装Docker. 2.准备好Tomcat.JDK的安装包以及该java项目的war包. 二.编写Dockerfile Dockerfile是一 ...

  9. mac电脑好用的工具总结

    制作gif:https://gfycat.com/gifbrewery 制作gif(超级好用,制作速度快,压缩图片小):https://www.cockos.com/licecap/ 解压工具:htt ...

  10. Flask API 如何接入 i18n 实现国际化多语言

    ​ 1. 介绍 上一篇文章分享了 Vue3 如何如何接入 i18n 实现国际化多语言,这里继续和大家分享 Flask 后端如何接入 i18n 实现国际化多语言. 用户请求 API 的多语言化其实有两种 ...