(四)canvas绘制路径

  • 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>

  

原文地址:https://www.cnblogs.com/bgwhite/p/9406799.html

时间: 2024-11-10 16:24:15

(四)canvas绘制路径的相关文章

Canvas绘制路径

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

绘制路径

3:绘制路径 ###canvas绘制路径 图形的基本元素是路径.路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合. ###步骤 1.首先,你需要创建路径起始点. 2.然后你使用画图命令去画出路径 3.之后你把路径封闭. 4.一旦路径生成,你就能通过描边或填充路径区域来渲染图形. ###绘制三角形 beginPath() 新建一条路径,生成之后,图形绘制命令被指向到路径上准备生成路径. 生成路径的第一步叫做beginPath().本质上,路径是由很多子路径构成,这些子路径都是在一个

canvas绘制贝塞尔曲线

原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0.P1.P2的函数B(t)追踪: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <

HTML5 Canvas 学习笔记(canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像)

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp   http://blog.csdn.net/clh604/article/details/8536059   http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

canvas绘制图形

第一步:html5页面中添加canvas元素 <canvas id="myCanvas" width="300" height="300"></canvas> 1.javascript绘制图形(矩形) <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.g

跟KingDZ学HTML5之四 继续探究Canvas之路径

哈哈,开始吧,这节课第一个内容是 路径.路径,顾名思义,就是俺拿着画笔,划线呗. 画图的几个步骤. 第一步:找个起点开始画图.----beginPath; 第二步 : 划线,画出自己想要的图像 . 第三步:完成图形,关闭路径. 当然也可以什么都不做,就是画一个点或者一条线   ----- closePath 第四步:填颜色. 哈哈,对不对啊,俺上小学,美术老师就是这么教的. 好了,先随便画一个图形吧.---画一条线,(*^__^*) 嘻嘻-- <script type="text/java

Android Canvas绘制

public class DrawView extends View { public DrawView(Context context) {  super(context); } @Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  /*   * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形   * drawLine

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

使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一.前期准备 1. HTML中准备一个容器存放画布,并为其设置width,height. <div> <canvas id="clock" height="200px" width="200px"></canvas>

canvas 绘制验证码

之前用canvas绘制了八卦图, 今天用canvas绘制的验证码, 很多地方都会用到, 记录下来 ,以后可以直接用 用到的方法 矩形 canvas.getContext('2d'); //构建绘图环境 canvas.clearRect(x,y,w,h); //清空之前绘制的矩形,释放空间 canvas.fillStyle='颜色'; //填充颜色 canvas.fillStyle='rgb(r,g,b)'; //填充颜色 canvas.fillRect(x,y,w,h); //绘制矩形 文字 c