• 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. 子元素绝对定位absolute后,自动撑开宽度

    position: absolute;   white-space: nowrap;

  2. HDFS 详解

    HDFS 概述 基于2.7.3 HDFS 优点: 1.高容错性 数据自动保存多个副本,默认是三个副本 副本丢失后,会自动恢复 2.适合批处理 移动计算而非移动数据,批处理的时候,数据量很大,移动数据是 ...

  3. hadoop26----netty，多个handler

    k客户端: package cn.itcast_03_netty.sendorder.client; import io.netty.bootstrap.Bootstrap; import io.ne ...

  4. 介绍Web项目中用到的几款表单验证插件

    第一个插件 jqueryvalidation 官网地址:http://jqueryvalidation.org/ 第二个插件 nice Validator 官网地址: http://niceue.co ...

  5. CSS 3 中的多列属性

    .column-count <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. c语言网络通信杂笔记

    1.sin_addr.s_addr = INADDR_ANY;设置成本地IP 2.pthread_create();线程生成函数 3.在linux下,sleep(1)是睡眠1s

  7. Jquery简单的选项卡实现

    概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...

  8. JAVA基础补漏--内部类

    成员内部类 public class InnerClass { public static void main(String[] args) { System.out.println("++ ...

  9. Oracle闪回机制

    最近学习oracle的时候,无意中看到oracle的闪回技术flashback,原来oracle在delete数据或者drop的时候,不是直接删除,而是跟windows一样,先把数据放入到回收站中. ...

  10. Ext.grid.GridPanel数据转json

    var count = docAdGrid.getStore().getCount(); var jsonArray = []; for (var i = 0; i < count; i++) ...