canvas 从ondraw中获取_canvas

最新推荐文章于 2022-11-20 23:03:54 发布
最新推荐文章于 2022-11-20 23:03:54 发布
阅读量339 收藏
点赞数
文章标签： canvas 从ondraw中获取
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42489104/article/details/112120741
版权

canvas基础

   canvas简述

canvas是html5新增的一个标签，使用都是依赖于js语法，不依赖任何第三方插件  ie低版本暂不支持

   canvas的基本使用步骤：

1：先在body中设置一个容器

 id='canvas'>

 在这里显示canvas绘制的图形

默认的宽是300px  高150px   不能使用css去设置宽高 可以直接在标签中设置或者js设置宽高

2：在javascript中

 2.1获取canvas标签对象---通过id名去获取

 var canvas = document.getElementById('canvas')  

2.2  获取画笔对象的上下文 | 画布的上下文对象  var ctx=canvas.getContext('2d')

2.3绘制一个矩形---表示初始坐标(10，10)宽100高50

   ctx.rect(10,10,100,50)

   ctx.moveTo(100,100)--- //起始点

   ctx.fill()   //填充    

   ctx.stroke()  //描边--写在最后面

canvas默认的填充颜色和边框颜色均为黑色，可以自定义设置相关的样式：

   关于颜色的设置-- 同css中颜色设置一样--一定在填充或者描边之前设置颜色

 fillStyle  填充颜色属性--

 strokeStyle描边颜色属性

如：ctx.fillStyle='red';  

     ctx.strokeStyle='yellow';

线条样式的设置：

 Linejoin   拐角设置  ---round圆角  miter   bevel

LineCap  线条两端的设置 butt  默认  round圆角 square加了一个正方形的帽

LineWidth线宽---数字

开启路径和关闭路径：

ctx.beginPath()  

绘制路径图形  moveTo  LineTo rect arc

先开启路径，相当于开辟了一个开启路径私有空间，绘制的内容就不会互相影响

但是画笔的linewidth  fillStyle strokeStyle    Linejoin LineCap  都是全局的

ctx.closePath()  关闭路径  不需要手动闭合 会自动将末尾的点和起始点连接闭合

402b438a0281a788732bd04d1aa35345.png

时钟案例：

main.js部分：

let dom = document.getElementById('clock');

let ctx = dom.getContext('2d');

let width = ctx.canvas.width;

let height = ctx.canvas.height;

var r = width / 2;

//为了宽度高度放大是时，其他边框等比美观，所以设置一个比例

var rem = width / 200;

function drawBackground() {

    ctx.save();

    ctx.translate(r, r);

    ctx.beginPath();  //每次开始前必须开始一条路径

    //按比例输出边框宽度，width/200=x/10=rem; 即 x=10 *rem

    ctx.strokeStyle = 'lightblue'

    ctx.lineWidth = 5 * rem;

    ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);

    ctx.stroke();    

var hourNumbers = ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ', 'Ⅷ', 'Ⅸ', 'Ⅹ', 'Ⅺ', 'Ⅻ'];

    hourNumbers.map(function (number, i) {

        var rad = 2 * Math.PI / 12 * i;

        var x = Math.cos(rad) * (r - 30 * rem);

        var y = Math.sin(rad) * (r - 30 * rem);

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        ctx.font = 10 * rem + "px Arial";

        ctx.fillText(number, x, y)

    });

    for (var i = 0; i < 60; i++) {

        var rad = 2 * Math.PI / 60 * i;

        var x = Math.cos(rad) * (r - 18 * rem);

        var y = Math.sin(rad) * (r - 18 * rem);

        ctx.beginPath();

        if (i % 5 === 0) {

            ctx.fillStyle = '#000';

        } else {

            ctx.fillStyle = '#ccc';

        }

        ctx.moveTo(x, y,)

        ctx.arc(x, y, 2 * rem, 2 * Math.PI, false);

        ctx.fill();

    }

}

function drawHour(hour, minute) {

    ctx.save();

    ctx.beginPath();

    var rad = 2 * Math.PI / 12 * hour;

    var mrad = 2 * Math.PI / 12 / 60 * minute;

    ctx.rotate(rad + mrad);

    ctx.lineWidth = 6 * rem;

    ctx.moveTo(0, 10 * rem);

    ctx.lineTo(0, -r / 2);

    ctx.lineCap = 'round';

    ctx.stroke();

    ctx.restore();

}

function drawMinute(minute) {

    ctx.save();

    ctx.beginPath();

    var rad = 2 * Math.PI / 60 * minute;

    ctx.rotate(rad);

    ctx.lineWidth = 3 * rem;

    ctx.moveTo(0, 10 * rem);

    ctx.lineTo(0, -r / 2 - 10);

    ctx.lineCap = 'round';                             

    ctx.stroke();

    ctx.restore();

}

function drawSecond(second) {

    ctx.save();

    ctx.beginPath();

    var rad = 2 * Math.PI / 60 * second;

    ctx.rotate(rad);

    ctx.lineWidth = 3;

    ctx.moveTo(-2 * rem, 20 * rem);

    ctx.lineTo(2 * rem, 20 * rem);

    ctx.lineTo(1, -r + 18 * rem);

    ctx.lineTo(1, -r + 18 * rem);

    ctx.fillStyle = '#e4393c';

    ctx.fill();

    ctx.restore();

}

function drawDot() {

    ctx.beginPath();

    ctx.fillStyle = '#fff';

    ctx.arc(0, 0, 3 * rem, 2 * Math.PI, false);

    ctx.fill();

}

function draw() {

    // 清除画布

    ctx.clearRect(0, 0, width, height);

    // 获取当前事件

    var now = new Date();

    // 获取当前的小时

    var hour = now.getHours();

    // 获取当前的分钟

    var minute = now.getMinutes();

    // 获取当前的秒钟

    var second = now.getSeconds();

    // 绘制

    drawBackground();

    drawHour(hour, minute);

    drawMinute(minute);

    drawSecond(second);

    drawDot();

    ctx.restore();

}

setInterval(draw, 1000);

渐变效果：

线性渐变：createlinearGradient

 let linearGradient = ctx.createLinearGradient(0, 0, 300, 0)

 linearGradient.addColorStop(0.2, '#ac8eff') //0-0.3 的颜色              

 linearGradient.addColorStop(0.5, '#dd8efd')    //为我们fillStyle设置为渐变色    

 linearGradient.addColorStop(0.8, '#f084fd')

  linearGradient.addColorStop(1, '#f683fc')

ctx.fillStyle = linearGradient //颜色对象赋值给当前轨迹的fillStyle              

ctx.rect(0, 0, 300, 300)

ctx.fill()

径向渐变：createRadialGradient

 let radialGradient=ctx.createRadialGradient(100, 200, 30, 80, 100, 150)

 //渐变的开始圆的坐标和半径   vs  渐变的结束圆的坐标和半径

        radialGradient.addColorStop(0.2, '#ac8eff')

        radialGradient.addColorStop(0.5, '#dd8efd')

        radialGradient.addColorStop(0.8, '#f084fd')

        radialGradient.addColorStop(1, '#f683fc')

        ctx.arc(100, 200, 60, 0, 2 * Math.PI)

        ctx.fillStyle = radialGradient

        ctx.fill()

变形:针对的是整个画布

 translate位移    rotate 旋转   scale放大

save保存变形之前的状态

restore回到保存之前的状态

c131246ffd7c2dc92bdc22defdd0354b.png

ZUHXS
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 中View.onDraw(Canvas canvas)的使用方法
08-29
Android 中 View.onDraw(Canvas canvas) 的使用方法 Android 中的 View.onDraw(Canvas canvas) 是一个非常重要的方法， 它是所有 View 组件的绘制入口。通过重载这个方法，可以实现自定义的绘制逻辑。在 Android ...
Android 自定义 view（三）—— onDraw 方法理解
weixin_30496751的博客
06-05 605
前言： 上一篇已经介绍了用自己定义的属性怎么简单定义一个view《Android 自定义view（二） —— attr 使用》，那么接下来我们继续深究自定义view，下一步将要去简单理解自定义view的一个比较重要的方法 onDraw(Canvas canvas) ，在探究 onDraw方法之前，我们必须先深入了解两个类Paint和Canvas 。 第一：认识Paint 在探究onDr...
自定义view（三）：onDraw 之 Canvas
进击的码字猴
04-13 1165
onDraw(Canvas canvas)中的重中之重—-Canvas Canvas是onDraw中贯穿整个方法的类。 那么让我们来看看Canvas里都有啥方法，（达康书记说：麻蛋，源码里方法太多，这锅我不背。）我就对几个常用的方法列举下： drawARGB(int a, int r, int g, int b)和drawColor(int color) 不用画笔，直接填充画板颜色 drawA
Canvas详解(android自定义view,onDraw()绘制各种图形)
fengzi
08-13 6245
Canvas Canvas:The Canvas class holds the “draw” calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a dra...
Canvas详解
lzy的博客
12-20 892
根据文档说明我们知道想要draw something有四个基本的要素： - 一个保存像素的Bitmap - 一个Canvas进行Bitmap的绘制 - 绘制的东西 - 画笔Paint获取Canvas获取Canvas实例我们一般都使用两种方式，一种是重写View的onDraw方法获得Canvas，另一种就是自己创建一个Canvas对象，创建Canvas对象我们需要一个Bitmap对象 Bitm
python实现模拟浏览器操作
qq_24851835的博客
05-11 2600
from selenium import webdriver # 需要先安装谷歌驱动（http://chromedriver.storage.googleapis.com/index.html）安装你谷歌浏览器对应的版本，放在python安装目录下，不然会报错：找不到驱动 opt = webdriver.ChromeOptions() # opt.add_argument('headless') # 设置option,后台运行 driver = webdriver.Chrome(options=opt)
Canvas_draw.zip
12-05
综上所述，"Canvas_draw.zip"项目涉及到了Android应用开发中的许多关键知识点，包括Canvas绘图、Bitmap处理、自定义View、触摸事件处理以及文件保存等。通过这个项目，开发者可以深入理解Android图形系统，并提升...
Android 自定义画布canvas 实现绘制和清空画布功能
10-21
在`onDraw()`方法中，通过`Canvas canvas = this.getCanvas();`获取Canvas实例。这个canvas就是我们在屏幕上进行绘制的画布。 2. **绘制基本图形** - `drawRect()`: 绘制矩形，需要传入矩形的边界坐标和画笔对象...
Android编程之绘图canvas基本用法示例
08-29
在Android编程中，Canvas是用于在屏幕上绘制图形的重要工具，它是`View`类的一部分，用于在`View`的`onDraw()`方法中进行图形绘制。本文将深入探讨Android Canvas的基本用法，通过实例来解析其相关的方法和使用技巧...
Canvas元素
ddd2501的博客
11-20 1815
Canvas元素的基础知识，好好学，好好看
搞懂 ctx.restore();ctx.save()；ctx.beginPath();
热门推荐
guitarist0505的博客
07-17 1万+
在做canvas时钟时，ctx.restore();ctx.save()；ctx.beginPath();反复用到！ 那么，这几个函数到底是什么功能呢?有什么区别和联系呢？ 1.beginPath() w3c上的解释：beginPath() 方法在一个画布中开始子路径的一个新的集合。 也就是说，运行到这个函数时，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新...
canvas 从ondraw中获取_网页上的艺术—Canvas
weixin_35110501的博客
12-26 204
简介本期来认识一下canvas，当然肯定有很多同学已经比较了解canvas是做什么的了，但想必工作中用到的一定很少，下面我们就来一起学习一下canvas的使用及基本语法。概述：Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -&lt...
Canvas学习：save()和restore()
wulixiaoxiao1的博客
03-18 1767
本来今天想开始学习怎么在Canvas中绘制矩形。但昨天发朋友圈，聊到Canvas。有网友提醒我将所有绘制的东西放在ctx.save()和ctx.restore()，能起到保存绘制状态和防止污染状态栈。养成一个良好的习惯。 此时一脸蒙逼！因为我并不知道这两个东东是什么意思，怎么使用？ 后来翻了书，也只是提到了在Canvas中有save()和restore()两个方法，它们都是属于Canv
【canvas使用】
caigoutu的博客
09-09 2264
canvas使用
canvas中的save和restore方法的作用
shidaping的博客
12-04 982
save方法可以理解为暂存当前画笔的状态，接下来对画笔的操作都不会被保存下来，直到restore方法被调用。讲得通俗一点，就是说，调用save方法，就是把当前的笔放笔架上，换一支笔，调用restore方法时，再把刚才放到笔架上的笔再拿下来用。我们来看一个例子。<!DOCTYPE html> <html> <head> <title></title> <style> #myCanvas{
canvas学习-1
sharryling
01-20 197
1.ctx.save() 和 ctx.restore()的使用 因为ctx是一个全局对象，ctx.save()的时候保存了ctx当前的状态值，然后你执行了一些值的修改，比如改变阴影大小，在函数最后调用ctx.restore()方法将ctx之前的状态值还原回去。 当楼主注释掉save和restore后，这时调用draw函数时ctx的画笔状态就不会保存与还原 2.星星 月亮 流星 canvas的...
JavaScript：canvas图像操作
前端御书房
10-19 6697
JavaScript：canvas图像操作，持续更新选中……
canvas 画布
ljj07220602的博客
08-30 1159
绘制轮廓矩形 参数 x轴起始位置 y轴起始位置 宽 高。canvas在页面设置出一块空白位置，为我们绘制涂写。
canvas怎样放进一个View中
最新发布
05-31
要将 `Canvas` 放进一个 `View` 中，我们需要在 `View` 的 `onDraw()` 方法中进行绘制。具体来说，以下是实现的步骤： 1. 创建一个类，继承自 `View`，并重写 `onDraw()` 方法。 2. 在 `onDraw()` 方法中，创建一个 `Canvas` 对象，使用 `canvas.drawXXX()` 方法进行绘制，其中 `XXX` 是具体的绘制方法，比如 `drawRect()`、`drawText()` 等。 3. 将绘制的结果显示在屏幕上。 以下是一个简单的例子，演示了如何将一个黑色的矩形绘制在 `CustomView` 中： ```java public class CustomView extends View { public CustomView(Context context) { super(context); } public CustomView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 创建一个黑色的矩形 Paint paint = new Paint(); paint.setColor(Color.BLACK); Rect rect = new Rect(0, 0, getWidth(), getHeight()); // 在 Canvas 上绘制矩形 canvas.drawRect(rect, paint); } } ``` 在这个例子中，我们重写了 `View` 的 `onDraw()` 方法，在其中创建了一个黑色的矩形，并使用 `canvas.drawRect()` 方法将矩形绘制在 `Canvas` 上。最后，在屏幕上显示出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值