(三)canvas绘制样式
![](/assets/blank.gif)
- beginPath()
- 对画线点的一个开始限制
- moveTo()
- 画线的起点,只在开头使用
- 参数两个x轴,y轴
- lineTo()
- 后续连线
- 两个参数x轴,y轴
- stroke()
- 连线无填充
- fill()
- 填充,默认黑色
- closePath()
- 对画线点的一个结束限制
- 自动起着连接起点的作用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>(二)canvas绘制多边形</title>
</head>
<style>
* {margin: 0;padding: 0;}
body { background-color: black; }
#c1 { background-color: #fff; }
</style>
<body>
<canvas id="c1" width="400" height="400"></canvas>
<script>
var oC = document.getElementById("c1");
var ctx = oC.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.lineTo(300,200);
ctx.closePath();
ctx.stroke();//只进行连线ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(200,300);
ctx.lineTo(300,300);
ctx.closePath();
ctx.fill();//填充连线的多边形
</script>
</body>
</html>
转载于:https://www.cnblogs.com/bgwhite/p/9406795.html
(三)canvas绘制样式相关推荐
- 小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
- android 自定义多边形,Android:自定义view之Canvas绘制图形
前面讲解了onMeasure,接下来讲解onDraw,onDraw主要就是绘制,也就是我们真正关心的部分,使用的是Canvas绘图. @Override protected void onDraw(C ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
- canvas 绘制直线 并选中_在画布中使用路径-Canvas的基本操作
一.在画布中使用路径 beginPath() 新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径moveTo(x, y) 把画笔移动到指定的坐标(x, y).相当于设置路径的起始点坐标 ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
- canvas绘制飞线效果
在我们做的可视化大屏项目中,经常会遇到飞线的效果. 在我们的大屏编辑器中,可以通过拖拽+配置参数的方式很快就能够实现.下面是我们使用大屏编辑器实现的一个项目效果: 中间地图就有飞线的效果. 抛开编辑器 ...
- canvas示例样式_使用js canvas和atari vcs trivia制作基本html游戏的快速示例
canvas示例样式 If you are anything like I was, you came into the programming world with some kind of fan ...
- 用canvas绘制微信小程序海报页面并保存相册-适用微信原生
微信小程序绘制海报并保存相册 tip:代码中使用的是uni的api 如果使用原生微信小程序开发,可以把uni更换成wx使用 文章目录 微信小程序绘制海报并保存相册 前言 一.分析需求 二.准备数据 三 ...
- android开发 之 Canvas绘制文字,图片
一.Canvas的常用操作速查表 操作类型 相关API 备注 绘制颜色 drawColor, drawRGB, drawARGB 使用单一颜色填充整个画布 绘制基本形状 drawPoint, draw ...
最新文章
- RNN神经网络的输入输出维度的关系
- linux deepin手动升级内核命令
- Scala入门到精通——第十四节 Case Class与模式匹配(一)
- CF618F-Double Knapsack【结论】
- objectC 数据类型转换
- CEGUI添加自定义控件
- 如何删减QQ无用功能 为系统彻底减负
- java 爬虫大型教程(一)
- 咸鱼之王小游戏PC版鼠标模拟器实现
- Ext.ux.form.SearchField 添加placeholder属性 2016年9月19日
- VMware虚拟机无法识别U盘解决方案
- 14.嵌入式控制器EC实战 SMBus读取电池信息并控制充放电
- ligerui 表格滚动条放在表格里,固定表头
- 献给小白的笔记day6
- Java实现word文档转换为pdf,jodconverter
- 《STL源码剖析》-- stl_deque.h
- oracle打开错误日志文件,Oracle联机日志出现错误ORA-16038 ORA-19809 ORA-00312 解决
- SpringCloud大文件分片上传/多线程上传
- 华为VRRP+BFD配置
- 特殊人群康复新途径:虚拟现实技术来帮忙