3_canvas绘制圆形1.3

最新推荐文章于 2024-03-21 03:51:35 发布
最新推荐文章于 2024-03-21 03:51:35 发布
阅读量164 收藏
点赞数
分类专栏： HTML5自学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26270303/article/details/80871939
版权
<head>
<meta charset="UTF-8">
<title>canvas绘制圆形</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>

<script src="js/canvas.js" type="text/javascript" charset="utf-8"></script>

<!--
onload 事件在页面载入完成后立即触发。这里指的是页面加载完成后触发draw1('cir')

-->

<body οnlοad="draw1('cir')">

<!--
       
        描述：
        1、开始创建路径 
        使用图形上下文对象的beginPath方法。
  context.beginPath（）;
  2、创建图形路径
  创建圆形路径时，需要使用图形上下文对象的arc方法。
  context.arc（x,y,radius,starAngle,endAngle,anticlockwise）
  x是绘制圆形的起点横坐标，y是绘制圆形起点的纵坐标，radius是圆形的半径，starAngle是开始的角度，endAngle是结束的角度，anticlockwise是否按顺时针方向绘制。
  绘制半径与圆弧时指定参数为开始弧度与结束弧度，如果你喜欢使用角度，可以使用以下这个方法，把角度换成弧度。
  var radius = degrees*Math.PI/180
  这个里面的Math.PI表示的角度是180度，Math.PI*2的角度是360度。
  3、创建完成关闭路径
  使用图形上下文对象的closePath方法将路径关闭。
  context.closepath();
  4、设置绘制样式然后调用绘制方法进行绘制
  context.fillStyle = 'rgba(255,0,0,0.25)';
  context.fill();
        -->
        <canvas id="cir" width="400" height="300"></canvas>

</body>



js代码

function draw1(id){
var canvas=document.getElementById(id);
var context=canvas.getContext('2d');


//  context.strokeStyle='black';
//  context.lineWidth=5;
//  context.beginPath();
//  context.arc(110,110,100,0,Math.PI*2,true);
//  context.closePath();
// context.fillStyle="red";
//  context.fill();
context.stroke();


context.lineWidth=5;
context.beginPath();
context.arc(110,110,100,0,Math.PI*2,true);//s顺时针
context.closePath();
context.fillStyle='red';

context.fill();

}

夜风13
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用canvas标签绘制圆形、三角形
weixin_46121783的博客
03-17 1133
学习使用canvas标签结合JavaScript脚本代码从网页中绘制圆形、三角形。 一.绘制圆形 1.首先打开一张需要绘制圆形的图片 2.在id名称为text的div中插入canvas标签，并对canvas标签进行属性设置 3.添加JavaScript脚本代码（获取canvas对象、绘制二维图形） 4.创建绘图路径，然后确定为圆形路径，确定圆形中心点位置及半径这些参数，注意是闭合路径 5.设置样式（边框颜色、边框宽度、填充颜色） 6.使用stroke函数绘制填充圆形的边框，使用fill函数来填充这个圆形 7
canvas-绘制圆形
nicecode
07-27 5223
角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。 canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) ​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， ​ 按照anticlockwise给定的方向（默认为顺时针）来生成。 ​ ture：逆时针 ​ false: 顺时针 ​ x,y为绘制圆弧所在圆上的圆心坐标
canvas画圆
编程界明世隐的博客
01-14 1万+
画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。 这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。 实例1 window.onload=function(){ var canvas = document.get
canvas基础：绘制圆弧、圆形
大剑师兰特的GIS世界
12-03 836
`arc() 用于绘制圆弧`，圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。 >`ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);`
【HTML5】 canvas 绘制图形
qq_45677671的博客
01-15 2676
使用 canvas 绘制图形用法详解
使用canvas绘制圆形，扇形
m0_62052306的博客
07-08 557
hello，我是小九，今天我们来使用Canvas绘制圆形，扇形。
HTML5 Canvas核心技术 图形、动画与游戏开发
09-19
176 4.1.2　drawimage()方法的用法 177 4.2　图像的缩放 179 4.3　将一个canvas绘制到另一个canvas之中 183 4.4　离屏canvas 186 4.5　操作图像的像素 189 4.5.1　获取图像数据 189 4.5.2　修改图像数据 195 4.6　...
HTML5 CANVAS游戏开发实战（PDF和源代码）
04-06
第3章　canvas高级功能 / 50 3.1　变形 / 50 3.1.1　放大与缩小 / 50 3.1.2　平移 / 53 3.1.3　旋转 / 54 3.1.4　利用transform矩阵实现多样化的变形 / 56 3.2　图形的渲染 / 65 3.2.1　绘制颜色渐变效果的图形 / 65...
Android版本转场动画
10-19
4.2 结合Canvas与Timer：在LoadingView中，通过重写onDraw()方法，使用Canvas绘制动画元素，同时利用Timer和TimerTask每隔一定时间更新动画状态，达到平滑的加载动画效果。 4.3 使用方式：开发者可以将这个...
Canvas实现动态绘制圆周效果|实现奥运五环
李桥桉的博客
04-22 1968
一、canvas简介是一个h5新增的标签 表示画布 是一个不需要其他三方操作 原生的必须通过js来对其画布进行构图 canvas本身是一个容器 js是一个画笔canvas有两个重要的属性 width heightcanvas应用很多 验证码 图表操作 截屏 手写板 (签合同)。。。
html5 canvas绘制圆形、方形矩形、线段，关于前端开发你必须要懂的APK瘦身知识
最新发布
qd520_1314的博客
03-21 621
绘制圆。
canvas绘制一个圆形
qq_51196135的博客
03-07 2300
如何使用canvas绘制圆形
kobe_back的博客
06-03 5848
Canvas是HTML5中新增的元素，专门用来绘制图形，相当于在页面中放了一张“画布”，可以在里面绘制图形，但是不是指用鼠标画图，而是需要用Javascript编写需要绘制的图形的脚本。 我们利用canvas可以绘制出下图： 在绘制上图之前，我们先来看下相关知识点： 一、 开始创建路径 使用beginPath方法开始创建路径。beginPath() 方法表示开始一条路径，或重置当前的路径。简单来说，其实就是告诉画布，我要开始画草稿了，请把之前的草稿都清除掉。 这个方法不设置参数，通过调用这个方
canvas绘制圆、圆环、文字、坐标系
weixin_43578304的博客
11-02 604
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。文章记录canvas绘制圆、圆环、文字、坐标系。
微信小程序canvas绘制圆形图片
热门推荐
CherryCola_zjl的博客
11-06 1万+
canvas基础知识补齐一下，明白了原理便很简单。 先使用.arc绘制一个圆圈，通过.clip裁剪，绘制在圆圈内的内容会出现，其他的都会隐藏。 .drawImage的绘制位置是相对原画布，而不是圆圈，这个不知道的画很坑啊。只要绘制图片的位置再圆圈内便会出现。 //保存上文 targetCtx.save() targetCtx.beginPath() targetCtx.arc(110, 60,...
canvas画布实例(绘制圆形图表)
陈小洋
11-30 2741
什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度： &lt;canvas id="myCanvas" widt...
canvas的简单使用介绍以及简单应用canvas绘制按钮样式
ruienger的博客
08-26 2989
canvas简单使用 在使用canvas之前，我们需要了解canvas是什么 画布 canvas是一个标签、容器，用来接受画布元素，其本身不能绘制图形，需要js绘制图形放入canvas中显示 既然canvas是一个标签，那就意味着我们需要把canvas标签加入html中，我们在html里写一个canvas标签并设置宽高（canvas宽高通过属性设置而不是css样式），然后添加一个边框让它更显眼一点 <head> <meta charset="UTF-8"> <m
Canvas绘制圆角矩形按钮
lea的博客
04-15 1174
效果图 drawButton(ctx,color,x,y,width,height,radius,text){//x/y:按钮起始点,width/height按钮宽高,radius弧度 //分为4条直线4个圆角绘制 ctx.beginPath(); ctx.fillStyle = color; ctx.moveTo(x+radius...
LVGL V7，lv_canvas绘制圆弧示例
05-30
好的，以下是使用 LVGL V7 中的 `lv_canvas` 绘制圆弧的示例代码： ```c // 创建一个画布对象 lv_obj_t *canvas = lv_canvas_create(lv_scr_act(), NULL); lv_canvas_set_buffer(canvas, buf, CANVAS_WIDTH, CANVAS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值