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. JavaScript：JS对象_Array

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  2. 05-Python函数

    函数定义与调用 函数由以下几个部分组成: 函数名 函数参数 函数体 返回值 定义一个函数: def showMyName(name): #定义函数 print(name) showMyName(&qu ...

  3. Project Euler 1~10 野蛮题解

    这些题都比较简单就不贴代码和做法了 23333333 具体到做法就是枚举暴力,这十题中可能难一点地方的就是筛质数表,可以学习一下 Eratosthenes 筛法或者是欧拉筛. 如果您不会前十题建议好好 ...

  4. Linux设备模型：2、基本对象 Kobject、Kset、Ktype

    原文:http://www.wowotech.net/device_model/kobject.html 作者:wowo 发布于:2014-3-7 0:25 分类:统一设备模型 前言 Kobject是 ...

  5. Xilinux PS与PL交互：裸机程序读写FPGA-REG

    背景 当时在搞ZYNQ驱动的时候,出于TDD的思想,从最简单的功能开始验证.因此就涉及到了下面的需求. PL侧会提供寄存器地址供PS端读写,这部分的寄存器在PL侧作为Avalon的IP,对PS端来说, ...

  6. openfoam 修改 src 库经验记录

    遇到一个问题,要把 sprayFoam 求解器的蒸发模型修改为自定义蒸发模型. sprayFoam 求解器本身没有实现蒸发模型,而是调用 $FOAM_SRC/lagrangian/intermedia ...

  7. Unity中正面视图的相机最大距离定位

    问题背景: Unity中在场景中有这样的需求,就是俯视整个场景或者平视整个场景.这种情况下场景中物体长宽比不一定和相机视口长宽比一致,要保证所有的物体都在视口内,并且距离不能太远,,所以处理起来需要点 ...

  8. 谈谈你对 keep-alive 的了解？

    在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大 ...

  9. mac idea 配置Tomcat

    官网下载Tomcat 下载地址:点我直达 配置Idea 设置Application Servers 操作步骤:Intellij IDEA->Preferences->Application ...

  10. vue2.x版本升级2.7版本

    2022年7月1日,vue正式迎来2.7版本,代号:"Naruto".支持 Composition API + <script setup> .原文链接 也就是说,你可 ...