• save()
    • 样式不受污染的起始范围
  • shadowOffsetX
    • 阴影x轴的距离
  • shadowOffsetY
    • 阴影y轴的距离
  • shadowBlur
    • 模糊度
  • shadowColor
    • 阴影颜色
  • restore()
    • 保护样式不受污染的结束范围
  • clearRect()
    • 可以理解为橡皮擦
    • 参数四个：x轴，y轴，宽度，高度
    • 清除整个画布：0，0，oC.width,oC.height
<!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>

function $(id) {

return document.getElementById(id);

}

var c1 = $("c1");

var ctx = c1.getContext("2d");

ctx.lineWidth = 20;//改变画出的图形的边框粗细，需要写在前面

ctx.save();

ctx.strokeStyle = "red";

ctx.shadowOffsetX = 10;//阴影x轴的距离

ctx.shadowOffsetY = 10;//阴影y轴的距离

ctx.shadowBlur = 5;//模糊

ctx.shadowColor = "blue";//阴影的颜色

ctx.beginPath();

ctx.moveTo(100,200);

ctx.lineTo(100,300);

ctx.lineTo(200,300);

ctx.closePath();

ctx.stroke();

ctx.restore();

ctx.beginPath();

ctx.moveTo(0,100);

ctx.lineTo(0,200);

ctx.lineTo(100,200);

ctx.closePath();

ctx.stroke();

ctx.clearRect(50,50,100,100);//清除可以理解为橡皮擦

//ctx.clearRect(0,0,oC.width,oC.height);//清除整个画布

</script>

</body>

</html>

　　

（四）canvas绘制路径的更多相关文章

  1. canvas绘制路径

    canvas绘制路径 方法 beginPath() 创建一个新的路径 lineTo() 描绘路径 closePath() 沿着路径画直线,并且画点移动到路径开头 stroke() 绘制形状 fill( ...

  2. canvas学习总结三：绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...

  3. Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  4. canvas学习总结四：绘制虚线

    上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...

  5. Canvas：绘制路径

    Canvas:绘制路径 绘制路径 图形的基本元素是路径.路径是[通过不同颜色和宽度的线段或曲线相连形成的不同形状的]点的集合.一个路径,甚至一个子路径,都是闭合的. 使用路径绘制图形需要一些额外的步骤 ...

  6. canvas绘制折线路径动画

    最近有读者加我微信咨询这个问题: 其中的效果是一个折线路径动画效果,如下图所示: 要实现以上路径动画,一般可以使用svg的动画功能.或者使用canvas绘制,结合路径数学计算来实现. 如果用canva ...

  7. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  8. canvas绘制贝塞尔曲线

    原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如 ...

  9. 应用canvas绘制动态时钟--每秒自动动态更新时间

    使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一. ...

随机推荐

  1. CodeForces - 220B Little Elephant and Array (莫队+离散化 / 离线树状数组）

    题意:N个数,M个查询,求[Li,Ri]区间内出现次数等于其数值大小的数的个数. 分析:用莫队处理离线问题是一种解决方案.但ai的范围可达到1e9,所以需要离散化预处理.每次区间向外扩的更新的过程中, ...

  2. html基础 CSS样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  3. Python3.x：PDFMiner3k在线、本地解析pdf

    Python3.x:PDFMiner3k在线.本地解析pdf 安装 pip install pdfminer3k 示例一:在线解析pdf ''' Demo:pdf2htmlex解析pdf Dateti ...

  4. QT中没有byte

    QT里没有没有byte数据类型的 自己定义:#define byte unsigned char

  5. Linux下针对路由功能配置iptables的方法详解

    作为公司上网的路由器需要实现的功能有nat地址转换.dhcp.dns缓存.流量控制.应用程序控制,nat地址转换通过iptables可以直 接实现,dhcp服务需要安装dhcpd,dns缓存功能需要使 ...

  6. redis主从、集群、哨兵

    redis的主从.集群.哨兵 参考: https://blog.csdn.net/robertohuang/article/details/70741575 https://blog.csdn.net ...

  7. AtCoder Regular Contest 095

    AtCoder Regular Contest 095 C - Many Medians 题意: 给出n个数,求出去掉第i个数之后所有数的中位数,保证n是偶数. \(n\le 200000\) 分析: ...

  8. Linux统计文件数目

    统计当前目录下文件数目 $ find . -type f | wc -l 统计文件行数 $ wc -l filename 仅统计内容为pattern的行(只有pattern) $ grep -w &q ...

  9. HTML中a标签的锚点

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

  10. java中TreeMap集合的常用方法

    实现Map集合的方法这里就不在讲了 https://www.cnblogs.com/xiaostudy/p/9510763.html public Map.Entry<K,V> ceili ...