• 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. 基于Bootstrap的jQuery登录表单

    在线演示 本地下载

  2. 20145219 《Java程序设计》第16周课程总结

    20145219 <Java程序设计>第16周课程总结 每周读书笔记(即学习总结)链接汇总 第0周问卷调查 第1周读书笔记 第2周读书笔记 第3周读书笔记 第4周读书笔记 第5周读书笔记 ...

  3. 20145109 实验二 Java面向对象程序设计

    实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 S.O.L.I.D原则: ...

  4. Convolutional Neural Network

    Why CNN for Image 图片是由像素点组成的,可以这样来解释深度神经网络对图片的处理. 第一层的layer是最基本的分类器,区分一些基本的特征,比如颜色.是否有斜线. 第二层的layer会 ...

  5. 分布式链路监控与追踪系统Zipkin

    1.分布式链路监控与追踪产生背景2.SpringCloud Sleuth + Zipkin3.分布式服务追踪实现原理4.搭建Zipkin服务追踪系统5.搭建Zipkin集成RabbitMQ异步传输6. ...

  6. Matlab绘图基础——图形绘制的插值  以及 图像大小的重采样

    使用说明:图形绘制时的插值 interp1   %1-D data interpolation interpft  %使用fft算法插值     %将原数据x转换到频率域,再逆转换回来更密集的数据采样 ...

  7. DataStage 服务启动

    说明:①如果发现was.datastage已经自启动,但db2没有自启动,应先将它们停止,在按顺序启动;②如果都自启动了,就不用再启动,关闭防火墙即可. --0.关闭防火墙service iptabl ...

  8. 分布式技术 webapi 路由追加html、aspx、shtml 适用于 对接 安卓、IOS

    首先是这样,在对接安卓和IOS或者是第三方调用的接口,我需要在服务端返回一个带.html/.aspx这样后缀的接口. 例子如下图:http://localhost:64131/api/UsersInf ...

  9. 2017版：KVM 性能优化之内存优化

    我们说完CPU方面的优化,接着我们继续第二块内容,也就是内存方面的优化.内存方面有以下四个方向去着手: EPT 技术 大页和透明大页 KSM 技术 内存限制 1. EPT技术 EPT也就是扩展页表,这 ...

  10. 在oracle中插入数据报错：ORA-00984列在此处不允许

    这里报错的原因就是当数据类型varchar2时没有使用单引号. 没写单引号,不管是双引号还是什么都没写都会报这个错误.