(三)canvas绘制样式
- 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>
(三)canvas绘制样式的更多相关文章
- canvas学习总结三:绘制路径-线段
Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...
- 【朝花夕拾】Android自定义View篇之(三)Canvas绘制文字
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...
- canvas学习总结三:绘制虚线
上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...
- 使用Canvas绘制图形的基本教程
原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5—canvas绘制图形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- canvas绘制线和矩形
###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
随机推荐
- Hbase1.2.4概述
安装Hbase的时候,需要注意版本与Hadoop的版本兼容,具体查看:https://hbase.apache.org/book.html#basic.prerequisites 如下图: 我的Had ...
- docker安装部署PHP nginx
sudo tee /etc/yum.repos.d/docker.repo <<-'EOF' [dockerrepo] name=Docker Repository baseurl=htt ...
- NAT配置与管理
为解决IPv4地址日益枯竭,出现NAT(Network Address Translation,网络地址转换)技术.NAT可以将来自一个网络的IP数据报报头中的IP地址(可以是源IP地址或目的IP地址 ...
- ICMP与PING解析
1.ICMP格式 ICMP是(Internet Control Message Protocol)Internet控制报文协议.它是TCP/IP协议族的一个子协议,用于在IP主机.路由器之间传递控制消 ...
- Dubbo与微服务
http访问到服务器要经过的内容:Nginx —Tomcat –db,nginx就是一个负载均衡左右.又一次面试问到了我nginx的反向代理.现在想了想面试官要问的应该是 域名的反向代理,就是使用一个 ...
- JSONP跨站访问
js中几种实用的跨域方法原理详解 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协 ...
- 华丽的使用sublime写lua~ sublime lua相关必装插件推荐~~
缘起 lua脚本语言虽好,代码写得飞快,可是写错了调试起来却很困难,lua使用者经常容易犯得一个错误是--写错变量名了,if end 嵌套太多没匹配~,多打了一个逗号, --假设定义了一个变量 loc ...
- AMD C1E SUPPORT
•C1E是一种电源管理状态,它可以让处理器节能不限于处理器内核.在CIE状态,可以通过降低内存时钟速度.关闭HT技术,来降低处理器能耗.这种新功能对于12核的处理器极其重要,因为这种处理器在设计上既增 ...
- POJ - 2785 - 4 Values whose Sum is 0 - 二分折半查找
2017-08-01 21:29:14 writer:pprp 参考:http://blog.csdn.net/piaocoder/article/details/45584763 算法分析:直接暴力 ...
- DPDK l2fwd
dpdk的l2fwd主要做二层转发,代码分析如下. #include <stdio.h> #include <stdlib.h> #include <string.h&g ...