HTML5 Canvas ( 线段端点的样式 ) lineCap
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
margin: auto auto;
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 线条顶点的样式
*/
cxt.lineWidth = 40;
cxt.strokeStyle = 'red';
cxt.beginPath();
cxt.moveTo(100, 100);
cxt.lineTo(800, 300);
cxt.lineCap = "butt"; //线段端点的样式
cxt.stroke(); cxt.beginPath();
cxt.moveTo(100, 200);
cxt.lineTo(800, 400);
cxt.lineCap = "round"; //线段端点的样式
cxt.stroke(); cxt.beginPath();
cxt.moveTo(100, 300);
cxt.lineTo(800, 500);
cxt.lineCap = "square"; //线段端点的样式
cxt.stroke();
</script>
HTML5 Canvas ( 线段端点的样式 ) lineCap的更多相关文章
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- HTML5 canvas 中的线条样式
线条样式属性 lineCap 设置或返回线条的结束端点样式 butt 默认.向线条的每个末端添加平直的边缘. round 向线条的每个末端添加圆形线帽. ...
- HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 超酷！！HTML5 Canvas 水流样式 Loading 动画
今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果. 效 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- html5 canvas 笔记二（添加样式和颜色）
色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...
- HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
随机推荐
- 走进windows编程的世界-----消息处理函数（1）
Win32消息机制 过程驱动:程序是依照我们预先定义好的顺序运行.每运行一步,下一步都已经依照预定的顺序 继续运行,直至程序结束. 事件驱动:程序的运行顺序是无序的.某个时间点所运行的 ...
- os层删除与数据库层drop的区别于对策。
os rm删除的,可以通过os层面恢复(句柄.inode.如果inode没有了可以根据block去重组出来数据文件),也可以通过rman备份还原方式恢复. db 层面drop删除的 只能不完全恢复( ...
- Hadoop 和 Spark 的关系
Hadoop实质上是一个分布式数据基础设施: 它将巨大的数据集分派到一个由普通计算机组成的集群中的多个节点进行存储,意味着您不需要购买和维护昂贵的服务器硬件. 同时,Hadoop还会索引和跟踪这些数据 ...
- Java awt组件间的继承关系
Container的继承关系: Window是可独立存在的容器,其他则不行.
- 一段简单的代码记录如何通过 js 给 HTML 设置自定义属性，并且通过点击事件获取到所设置的自定义属性值
for (var i = 0; i <= 5; i++) { const divJoinDay = document.createElement("div"); divJoi ...
- linux 脚本 逻辑关系的写法及区别
今天总结一下linux shell中逻辑关机表达方式. 逻辑与的表达:1).if [ $xxx=a -a $xx=b ] 2).if [ $xxx=a ] && [ $xx=b ]逻 ...
- Qt 资源文件
以下演示如何在Qt Creator使用QIcon加载一张 png 图片: 在工程上点右键,选择“添加新文件…”,在 Qt 分类下选择“Qt 资源文件”: 点击“选择…”按钮,打开“新建 Qt 资源文件 ...
- C++基本规则
C++ 程序结构 让我们看一段简单的代码,可以输出单词 Hello World. #include <iostream> using namespace std; // main() 是程 ...
- 错误：Unsupported major.minor version 51.0（jdk版本错误）
Java.lang.UnsupportedClassVersionError: org/apache/nutch/crawl/Crawl3 : Unsupported major.minor vers ...
- python selenium-6 HTML测试报告
1.生成HTML测试报告 import unittest,sys from selenium import webdriver from time import sleep class TestBai ...