• 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. js使用经验之谈

    1.  js 对象,先有的起作用.CSS属性,后有的起作用. 2. 方法中使用submit提交表单,如果提交后面还有代码需要执行,不能保证顺序.例如,提交后关闭页面,很可能会在提交前关闭页面,导致提交 ...

  2. 初入spring boot（五 ）websocket

    一.广播式 广播式即服务端有消息时,会将消息发送给所有连接了当前endpoint的浏览器 1.配置websocket,需要在配置类上使用@EnableWebSocketMessageBroker开启w ...

  3. java基础(4)--运算符及表达式

    运算符及表达式 算数运算 加(+) 减(-) 乘(*)  除(/) 取余(%) 自增(++) 自减(- -) 注意点 1. 同种类型参与运算(可能需要自动类型转换),返回同种类型 2. 整数的除法是整 ...

  4. 前端人脸识别框架Tracking.js与JqueryFaceDetection

    这篇文章主要就介绍两种前端的人脸识别框架(Tracking.js和JqueryFaceDetection) 技术特点 Tracking.js是使用js封装的一个框架,使用起来需要自己配置许多的东西,略 ...

  5. 内核hlist的使用

    struct hlist_head { struct hlist_node *first; }; struct hlist_node { struct hlist_node *next, **ppre ...

  6. [转] Android Fragment 你应该知道的一切

     转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42628537,本文出自:[张鸿洋的博客] 很久以前写过两篇Fragment的介 ...

  7. 平滑重启php

    kill -USR2 `cat /usr/local/webserver/php/var/run/php-fpm.pid`

  8. java类敏感词过滤类

    package com.fpx.pcs.prealert.process.service.impl; import java.util.HashMap;import java.util.HashSet ...

  9. scala学习手记22 - 参数化类型的可变性

    java 的代码中多少有些不是很严谨的内容,比如下面的这段代码: public class Trouble { public static void main(String[] args) { Int ...

  10. SpringBoot实现多数据源(实战源码)

    通过一个数据库的表数据去查询同步另一个数据库,之前的方式是通过写个小工具,然后jdbc方式进行处理,这个方式也挺好用的.学习了springboot后发现可以实现多数据源操作,然后就具体实现以下. 以下 ...