• 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. [MongoDB] 学习笔记（2）

    1. Mac 安装mongodb: 官网下载mac版mongodb,解压到本地目录,如/Applications/mongodb,注意这里的地址是根更目录下的Applications,然后在根目录下创 ...

  2. python报错 TypeError: string indices must be integers

    所以在读取字典的时候,最好先判断类型,然后再查看它是否已经有这样的属性: type(mydict) == type({})             #检查不是字典 如果是字典,再看看有没有这样的属性: ...

  3. python网络编程——网络IO模型

    1 网络IO模型介绍 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种:    (1)同步阻塞IO(Blocking IO):即传统的IO模型.    (2)同步非阻塞IO(Non-bl ...

  4. HTML，CSS，font-family：中文字体的英文名称

    宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...

  5. CAS单点登录的原理

    1.首先了解几个概念 1).TGC:Ticket-granting cookie,存放用户身份认证凭证的cookie,在浏览器和CAS Server间通讯时使用.2).TGT:ticket grant ...

  6. Spring_事务(1)

  7. 初识 Zookeeper

    云计算越来越流行的今天,单一机器处理能力已经不能满足我们的需求,不得不采用大量的服务集群.服务集群对外提供服务的过程中,有很多的配置需要随时更新,服务间需要协调工作,这些信息如何推送到各个节点?并且保 ...

  8. struts2——上传图片格式

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. log4j.appender.AFile.File日志的相对路径

    log4j.appender.AFile=org.apache.log4j.DailyRollingFileAppenderlog4j.appender.AFile.DatePattern='.'yy ...

  10. 20165332实验二 Java面向对象程序设计

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