精华内容
下载资源
问答
  • canvas画圆
    2021-05-10 20:18:26
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>canvas的使用</title>
    </head>
    
    <body>
      <script>
        window.onload = function () {
          /**
           * W:宽
           * H:高
           * borderWidth:border宽
           * borderColor:border颜色
           * color:背景颜色
           * textColor:文字颜色
           * fontText:圆内的文字
           *  */
          function createCanvas(W, H, borderWidth, borderColor, color, textColor, fontText) {
            var canvas = document.createElement('canvas')
            canvas.width = W
            canvas.height = H
            var ctx = canvas.getContext('2d')
            ctx.beginPath()
            ctx.arc((W + borderWidth) / 2, (H + borderWidth) / 2, 30, 0, Math.PI * 2, true)
            ctx.closePath()
            // 填充背景颜色
            ctx.fillStyle = color
            ctx.fill()
    
            // 填充边框颜色
            ctx.lineWidth = borderWidth
            ctx.lineCap = 'round'
            ctx.strokeStyle = 'red'
            ctx.stroke() //
    
            // 填充文字颜色
            ctx.font = "20px Arial"
            ctx.fillStyle = textColor
            ctx.textAlign = "center"
            ctx.fillText(fontText, (W + borderWidth) / 2, (H + borderWidth * 2) / 2)
    
            return canvas
          }
    
          for (var i = 0; i < 20; i++) {
    
            document.body.append(createCanvas(100, 100, 5, 'red', '#555555', '#fff', i))
          }
        }
      </script>
    </body>
    
    </html>
    
    效果图

    在这里插入图片描述

    更多相关内容
  • canvas 画圆

    2021-03-19 17:46:22
    目录@[TOC](目录)canvas 画圆一个简单的圆圆弧等圆 canvas 画圆 一个简单的圆 arc(x, y, radius, startAngle, endAngle, 顺时针还是逆时针) ture 逆时针 false顺时针 <template> <div> <canvas ...

    canvas 画圆

    一个简单的圆

    • arc(x, y, radius, startAngle, endAngle, 顺时针还是逆时针) ture 逆时针 false顺时针

    在这里插入图片描述

    <template>
      <div>
        <canvas ref="canvasRef" width="420px" height="420px">您的浏览器版本过低,请升级浏览器或者使用谷歌浏览器</canvas>
      </div>
    </template>
    
    <script>
    export default {
      name: "CanvasText",
      components: {},
      data() {
        return {};
      },
      mounted() {
        let can = this.$refs.canvasRef;
        let ctx = can.getContext("2d");
        // arc(x, y, radius, startAngle, endAngle, 顺时针还是逆时针) ture 逆时针 false顺时针
        ctx.arc(200, 200, 50, 0, Math.PI * 1.5, false);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.lineWidth = 3;
        ctx.strokeStyle = "red";
        ctx.stroke();
    }
    };
    </script>
    <style lang="scss" scoped></style>
    
    

    圆弧等圆

    在这里插入图片描述

    <template>
      <div>
        <canvas ref="canvasRef" width="420px" height="420px">您的浏览器版本过低,请升级浏览器或者使用谷歌浏览器</canvas>
      </div>
    </template>
    
    <script>
    export default {
      name: "CanvasText",
      components: {},
      data() {
        return {};
      },
      mounted() {
        let can = this.$refs.canvasRef;
        let ctx = can.getContext("2d");
    
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, Math.PI, true);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(200, 100, 50, 0, Math.PI, false);
        ctx.stroke();
    
        ctx.beginPath();
        ctx.stroke();
    
        ctx.arc(200, 200, 50, 0, Math.PI * 2, false);
        ctx.beginPath();
        ctx.stroke();
        ctx.arc(200, 200, 60, 0, Math.PI * 2, false);
    
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(200, 200, 70, 0, Math.PI * 2, false);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(200, 200, 80, 0, Math.PI * 2, false);
        ctx.stroke();
    }
    };
    </script>
    <style lang="scss" scoped></style>
    
    
    展开全文
  • canvas画圆

    千次阅读 2021-01-14 17:07:15
    画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数:x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。 这些都...

    画圆方法说明

    arc(x, y, radius, startAngle, endAngle, anticlockwise)
    该方法有六个参数:x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。
    这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时,是逆时针方向,否则顺时针方向。

    实例1

    	window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		//从150,150的位置为圆心,50为半径,画一个从0-2π的圆
    		ctx.arc(150,150,50,0,2*Math.PI);
    		ctx.stroke();
    	}

    画了一个圆

    实例2

    	window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		var dis=60;
    		//平移x方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30,20,0,2*Math.PI);
    			ctx.closePath();
    			ctx.stroke();
    		}
    	}

    连续的画5个圆

    实例3

    	window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		var n=1;
    		var dis=60;
    		//平移x方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30,20,0,2*Math.PI);
    			ctx.closePath();
    			ctx.stroke();
    		}
    		
    		//平移Y方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) );
    			ctx.closePath();
    			ctx.stroke();
    		}
    		
    		n++;
    		//平移Y方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) );
    			//ctx.closePath();
    			ctx.stroke();
    		}
    	}

    需要注意的是 closePath 会将没有闭合的圆弧闭合

    实例4

    		//平移Y方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) ,true);
    			//ctx.closePath();
    			ctx.stroke();
    		}

    arc函数的最后一个函数设置为true,与之前默认的对面可以和明显的看出区别

     

    实例5

    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) ,true);
    			//ctx.closePath();
    			ctx.fill();
    		}

    fill会填充为实心的,并且会自动闭合

    完整代码实例

    	window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		var n=1;
    		var dis=60;
    		//平移x方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30,20,0,2*Math.PI);
    			ctx.closePath();
    			ctx.stroke();
    		}
    		
    		//平移Y方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) );
    			ctx.closePath();
    			ctx.stroke();
    		}
    		
    		n++;
    		//平移Y方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) );
    			//ctx.closePath();
    			ctx.stroke();
    		}
    		
    		n++;
    		//平移Y方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) ,true);
    			//ctx.closePath();
    			ctx.stroke();
    		}
    		
    		n++;
    		//平移Y方向,画5个圆
    		for(var i=0;i<5;i++){
    			ctx.beginPath();
    			ctx.arc(30+dis*i,30+dis*n,20,0,2*Math.PI/(i+1) ,true);
    			//ctx.closePath();
    			ctx.fill();
    		}
    	}

     

    展开全文
  • 我们来学一下如何用canvas画圆 画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径 弧度单位用Math.PI 顺逆时针用0(顺时针) 1(逆时针) const cas = document....

    canvas是H5的一大重点
    我们来学一下如何用canvas画圆

    画圆

    arc(x,y,r,起始弧度,结束弧度,顺逆时针)

    • x,y就是这个圆的圆心坐标
    • r是圆的半径
    • 弧度单位用Math.PI
    • 顺逆时针用0(顺时针) 1(逆时针)
    const cas = document.getElementsByTagName('canvas')[0];
    const ctx = cas.getContext("2d");
    
    ctx.arc(250,250,100,0,Math.PI / 2,1);
    ctx.stroke();
    

    在这里插入图片描述
    起始点和终点相同,但顺逆时针画出来是不太一样的

    const cas = document.getElementsByTagName('canvas')[0];
    const ctx = cas.getContext("2d");
    
    ctx.arc(250,250,100,0,Math.PI / 2,0);
    ctx.stroke();
    

    上面那个圆,我们换个方向,顺时针
    在这里插入图片描述

    画圆角

    我们先来理解一个canvas中圆角的画法。
    我们要认识3个点
    在这里插入图片描述
    arcTo(bx,by,cx,cy,圆角大小)

    圆角的大小我解释一下:就是那个切圆角的正圆的半径。

    如果上面那个图你看懂了,那么我来画一个圆角矩形,看你是否真的理解

    var can = document.getElementsByTagName('canvas')[0];
    var ctx = can.getContext('2d');
    
    ctx.moveTo(100,110); // 为什么不是100 100
    // 你可以改成100,看到底会出现什么问题
    ctx.arcTo(100,200,105,200,10);
    
    ctx.arcTo(200,200,200,199,10);
    ctx.arcTo(200,100,199,100,10);
    ctx.arcTo(100,100,100,105,10);
    ctx.stroke();
    

    在这里插入图片描述

    展开全文
  • Android canvas画圆

    千次阅读 2018-11-30 09:53:27
    protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Path path = new Path(); canvas.drawCircle(cx,cy,50,mRectPaint); } @Override public boolean onTouchEvent(MotionEvent event) { //第一...
  • canvas笔记-使用canvas画圆及点阵的使用

    千次阅读 多人点赞 2020-05-27 10:19:02
    如下例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: bl
  • canvas画海报圆形微信头像,包括紫色背景带有圆角的矩形方法 1、画圆 2、画填充色的带有圆角的矩形
  • 使用 canvas 画圆

    2017-12-25 14:11:02
    canvas = document.querySelector( "canvas" ); var ctx = canvas.getContext( "2d" ); var WIDTH = document.documentElement.clientWidth; var HEIGHT = document.documentElement.clientHeight; ...
  • 1.怎样设置代码package ...import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android...
  • 首先我们来看第一种canvas画圆的方法:使用canvas arc()方法动态实现画圆arc() 方法创建弧/曲线(用于创建圆或部分圆)。思路:通过设置的开始角度和结束角度来做限定,然后通过累加临时的角度变量实现动画效果。语法...
  • 小程序canvas画圆

    千次阅读 2018-05-12 11:03:52
    // circleImg(ctx, img, x, y, r) { //切圆方法 // ctx.save(); // var d = 2 * r; // var cx = x + r; // var cy = y + r; // ctx.arc(cx, cy, r, 0, 2 * Math.PI); // ctx.clip(); /...
  • canvas 画圆 角度问题

    千次阅读 2017-05-15 10:43:53
    在使用canvas画布画圆的时候,我们使用 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) x:圆心x的坐标 ;y:圆心y的坐标 ;straAngle:开始角度; endAngle:结束角度 ;anticlockwise:是否为逆...
  • HTML canvas画圆

    2020-04-17 19:05:02
    画一个实心圆 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title>...canvas id="myCanvas" width="300" height=...
  • 使用canvas画圆

    2018-10-16 21:57:00
    var canvas = document.getElementById('canvas'); // 获取2d上下文 var context = canvas.getContext('2d'); // 设置样式 context.fillStyle = 'pink'; context.strokeStyle = 'skyblue'; // ...
  • canvas画圆的几个关键点

    千次阅读 2017-04-06 18:29:27
    先给出代码 <canvas id="drawing" width="200px" height="200px"></canvas> var drawing=document.getElementById("drawing"); if(drawing.getContext){ var context=draw
  • Canvas画圆时有条线

    千次阅读 2019-06-25 15:22:29
    所以我推测:这里的调用画圆的函数后都会将圆的结束的位置与最近的moveTo位置相连,如果没有定义moveTo,那么连向零点,也就是canvas的左上角。 所以当出现如上所示的直线时,你需要知道圆的结束位置,将moveTo位置...
  • html5Canvas画圆

    2018-04-11 12:12:33
    html5Canvas画圆 首先来理解下弧度制,以下内容摘自百度百科。用弧长与半径之比度量对应圆心角角度的方式,叫做弧度制,用符号rad表示,读作弧度。等于半径长的圆弧所对的圆心角叫做1弧度的角。由于圆弧长短与圆半径...
  • canvasPractice Use HTML5 canvas draw circles, and realize the zoom of the specified circle, select, change color, drag, delete.利用html5的canvas画圆,并实现指定圆的放大缩小、选中、更改颜色、拖动、删除
  • canvas画圆又毛边

    2019-09-26 16:22:51
    canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <...
  • canvas画圆方法

    2019-10-03 16:53:06
    cxt.arc(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数,代表圆心坐标.第三个参数是圆的半径.第四个参数代表圆周起始位置.0 PI就是起始位置.沿顺时针路线,分别是0.5 PI(正下方),1 PI和1.5 PI(正上方),...
  • canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ...
  • 想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:...
  • Canvas画圆

    千次阅读 2015-11-27 16:06:01
    Canvas画圆方法如下: 您的浏览器不支持canvas标签。 //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,838
精华内容 3,535
关键字:

canvas画圆