绘制图形使用路径

概念:

在绘制除了正方形或长方形以外的的其他图形,需要使用路径。

步骤:

开始创建路径

创建图形的路径

路径创建完成后,关闭路径

设定绘制样式,调用绘制方法,绘制路径

应用:

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<body >
绘制圆形:<canvas id="yuan"></canvas>
</body>

<script>
function drawarc()
{
var canvas = document.getElementById(‘yuan‘);
if(canvas == null)
return false;
var context = canvas.getContext(‘2d‘);
context.fillStyle = ‘#EEEEFF‘;
context.fillRect(0,0,400,300);
var n = 0;
for(var i = 0;i<10;i++)
{
context.beginPath();//开始创建路径
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);//创建圆形路径
context.closePath();//关闭路径
context.fillStyle = ‘rgba(255,0,0,0.25)‘;//设置颜色
context.fill();//填充图形
}
}
</script>
</html>

效果

原文地址:https://www.cnblogs.com/yanyanstyle/p/11311266.html

时间: 2024-10-16 05:42:03

绘制图形使用路径的相关文章

Android中android.graphics下面的绘制图形类Canvas,Paint,Bitmap,Drawable

1.概念区别: 很多网友刚刚开始学习Android平台,对于Drawable.Bitmap.Canvas和Paint它们之间的概念不是很清楚, 其实它们除了Drawable外早在Sun的J2ME中就已经出现了,但是在Android平台中,Bitmap.Canvas相关的都有所变化. 首先让我们理解下Android平台中的显示类是View,但是还提供了底层图形类android.graphics,今天所说的这些均为graphics底层图形接口. Bitmap - 称作位图,一般位图的文件格式后缀为b

Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等

// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect{    CGContextRef context = UIGraphicsGetCurrentContext();         /*NO.1画一条线     CGContex

HTML5使用Canvas来绘制图形

一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘制图形. 3.可以通过多种方法通过Canvas绘制路径.盒.圆.字符以及添加图像. 二.Canvas绘制图形 1.绘制矩形 2.绘制圆形 3.moveTo和lineTo 4.使用bezierCurveTo绘制贝塞尔曲线 5.绘制线性渐变 6.绘制径向渐变 7.绘制变形图形 8.绘制图形合成gloablComp

iOS开发UI篇——Core Animation核心动画CAShapeLayer(绘制图形等)简介

重点: 获取绘制图形        Layer CAShapeLayer *shapeLayer = [CAShapeLayer layer];     设置图形有线颜色   [CAShapeLayer layer].strokeColor = [UIColor redColor].CGColor;      设置图形填充颜色   [CAShapeLayer layer].fillColor = [UIColor clearColor].CGColor;   设置图形线宽      [CASha

微信小程序开发—(八)canvas绘制图形

一.小知识 (1).API接口 (2).context 对象的方法列表 二.步骤 wxml中: <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> 在js文件onLoad: function() {}的方法中开始编写代码 1.创建一个 Canvas 绘图上下文 CanvasContext const ctx = wx.createCanvasContext('myCanvas')

使用canvas来绘制图形

一个简单例子 一开始,让我们来看个简单的例子,我们绘制了两个有趣的长方形,其中的一个有着alpha透明度. 我们将在接下来的例子里深入探索一下这是如何工作的. <html> <head> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getCont

千呼万唤 HTML 5 (8) - 画布(canvas)之绘制图形

[索引页][源码下载] 作者:webabcd 介绍HTML 5: 画布(canvas)之绘制图形 画布 Demo - 画布的基本概念及 Demo,canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL() 在画布上绘制矩形 - canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, str

canvas 绘制图形

什么是canvas? <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 方法属性 颜色.样式和阴影 属性 描述 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式. strokeStyle 设置或返回用于笔触的颜色.渐变或模式. shadowColor 设置或返回用于阴影的颜色. shadowBlur 设置或返回用于阴影的模糊级别. shadowOffsetX 设置或返回

[Canvas学习]绘制图形

学习目的:在Canvas上绘制矩形,三角形,直线,圆弧,曲线 栅格 栅格canvas grid,canvas元素默认被网格覆盖,栅格的起点是左上角坐标(0,0),元素的位置都是相对于栅格起点来定位的. 绘制矩形 API提供了三种方法绘制矩形 fillRect(x, y, width, height) 绘制填充的矩形 strokeRect(x, y, width, height) 绘制矩形边框 clearRect(x, y, width, height) 清除指定矩形区域变的完全透明 rect(x