Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Canvas 入门

Canvas 入门

作者头像
逃跑计划
修改于 2022-08-05 03:31:17
修改于 2022-08-05 03:31:17
56400
代码可运行
举报
文章被收录于专栏:我的前端体系我的前端体系
运行总次数:0
代码可运行

1.Canvas 常用 api

获取 2d 上下文对象
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let ctx = document.getElementById("canva").getContext("2d");
globalCompositeOperation

图形组合方式的设置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ctx.globalCompositeOperation = "destination-over";//新生成的图像在上方
填充和背景
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 3.设置背景填充色和边框色
ctx.fillStyle = "rgba(0,0,0,0.4)";
ctx.strokeStyle = "rgba(0,153,255,0.4)";
位移
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 5.设置位移
ctx.translate(150, 150);
旋转

旋转只传入一个参数:旋转的角度

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 6.1 地球旋转
ctx.rotate(
    ((2 * Math.PI) / 60) * time.getSeconds() +
    ((2 * Math.PI) / 60000) * time.getMilliseconds()
);

2.canvas 画箭头

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var obj = document.getElementById("row");
var ctx = obj.getContext("2d");
ctx.beginPath();
ctx.moveTo(76, 0);
ctx.lineTo(100, 0);
ctx.lineTo(100, 40);
ctx.lineTo(120, 40);
ctx.lineTo(88, 60);
ctx.lineTo(55, 40);
ctx.lineTo(76, 40);
ctx.fill();

svg 是基于 XML 的矢量图形,canvas 是用脚本绘制的图形, svg 不会失真,canvas 会失真。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-08-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Canvas基本动画-太阳系的动画 原
1、清空canvas 除非接下来要画的内容会完全充满canvas(例如背景图),否则你需要清空所有,最简单的方法是使用clearRect方法 2、保存canvas状态 如果你要改变一些会改变canvas状态的设置(样式,变形之类的),又要在每画一帧之时都是原始状态的话,你需要先保存一下 3、绘制动画图形 4、恢复canvas状态 如果已经保存了canvas的状态,可以先恢复它,然后重绘下一帧。
tianyawhl
2019/04/04
9160
canvas详细教程! ( 近1万字吐血总结)
今天为大家带来的是我已经写了很久了的canvas详细教程,按照文章的案例一个一个敲下来保证你可以学会绘制很多图案和动画,对入门canvas很有帮助!
用户9999906
2022/12/22
4.2K0
canvas学习笔记(八)—- 基本动画
1.用window.setInterVal()、window.setTimeOut()和window.requestAnimationFrame()来定期执行一个指定函数
Java架构师必看
2021/08/19
7110
Canvas
http://www.w3c.org/TR/2dcontext/ https://html.spec.whatwg.org/
jinghong
2020/05/09
13.2K0
Canvas
❤️创意网页:打造炫酷网页 - 旋转彩虹背景中的星星动画
在这个技术博客中,我们将学习如何使用HTML5 Canvas和JavaScript创建一个炫酷的网页效果。我们将打造一个动态的旋转彩虹背景,并在其中添加一个可爱的旋转星星动画。通过本博客,您将了解如何使用Canvas绘制彩虹渐变背景和绘制旋转的星星,以及如何通过动画实现星星的旋转效果。
命运之光
2024/03/20
2820
❤️创意网页:打造炫酷网页 - 旋转彩虹背景中的星星动画
前端|利用<canvas>画布制作地球轨道
<canvas> 画布标签常用于绘制图像,但是,<canvas> 元素本身并没有绘制能力,它仅仅是图形的容器,要想通过<canvas>画布标签来绘制图像,还需要调用js方法。其中最常见得方法是getContext()方法,它可返回一个对象,该对象提供了用于在画布上绘图的方法和属性,可在画布上绘制文本、线条、矩形、圆形等等。今天就利用<canvas> 画布来绘制一下地球轨道的效果。
算法与编程之美
2020/04/17
2.2K0
第156天:canvas(三)
​ translate方法接受两个参数。x 是左右偏移量,y 是上下偏移量,如右图所示。
半指温柔乐
2018/09/11
5410
第156天:canvas(三)
Canvas 从进阶到退学
接着 《Canvas 从入门到劝朋友放弃(图解版)》 ,本文继续补充 canvas 基础知识点。
德育处主任
2022/12/13
2.1K0
Canvas 从进阶到退学
Canvas
注意canvas 的 width 和 height 不要用 css 来设定,如果用 css 样式来设置,会变形和失真
小丞同学
2021/08/16
1.3K0
H5和微信小游戏 Canvas API 整理前言
这段时间闲下来,系统学习了微信小程序和微信小游戏,发现还是挺有意思的。现在微信小游戏的开发都离不开游戏引擎,用原生小游戏开发工具开发的很少很少。但是毕竟我不是专业游戏开发,所有游戏引擎就不搞了,我们就单纯来看原生微信小游戏开发。
大公爵
2018/10/10
3K0
H5和微信小游戏 Canvas API 整理前言
JAVASCRIPT生成图形验证码
本文实例为大家分享了 js 生成图形验证码的具体代码,供大家参考,具体内容如下 getGVerify: function(id) { function GVerify(options) { //创建一个图形验证码对象,接收options对象为参数 this.options = { //默认options参数值 id: '', //容器Id canvasId: 'verifyCanvas', //canvas的ID width: '100',
ihoey
2018/10/31
2.3K0
Day 3 学习Canvas这一篇文章就够了
一、canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 ​ 它最初由苹果内部使用自己MacOS X WebKit推出,供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来,有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox),Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。 ​ Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域,类似于其他通用的二维API,通过一套完整的绘图函数来动态生成图形。 ​ Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。 二、Canvas基本使用 2.1 <canvas>元素
IT人一直在路上
2019/09/16
1.1K0
Day 3 学习Canvas这一篇文章就够了
canvas绘制动画原理及案例讲解(绘制小恐龙动画、时钟等)
这期为大家带来的是canvas的动画绘制案例与讲解。不知道大家上一期canvas绘制基本图形的入门教程看的怎么样了,如果已经遗忘了或者还没看的小伙伴建议先去看一下,上一期是学习这一期的基础:
用户9999906
2022/12/22
3.8K0
canvas绘制动画原理及案例讲解(绘制小恐龙动画、时钟等)
canvas入门,就是这个feel!
Canvas 是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图。也就是说我们将通过JS完成画图而不是css。
Daotin
2019/11/27
6170
图形验证码(react+vue)版本
之前vue版本的博客里面找了一款图形验证的组件, 由于现在重新开发了react版本的博客 图型验证码 没有找到比较好的组件, 所以干脆看一下之前vue版本的图形验证码的源码 直接搬过来 先看一下效果图: 图片 接下来直接上代码: VUE版本: 组件源码:sidentify.vue <template>   <div class="s-canvas">     <!-- 验证码组件 -->     <canvas id="s-canvas" :width="contentWidth" :height="c
biaoblog.cn 个人博客
2022/08/11
7630
图形验证码(react+vue)版本
canvas学习笔记(七)—-裁切路径
clip()将当前的路径转换为裁剪路径 只能用一次,后续再用,不起作用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>day5-1</title>
Java架构师必看
2021/08/19
5900
canvas之clip使用 原
裁切路径和普通的canvas图形差不多,不同的是它的作用是遮罩,用来隐藏路径以外的部分。 clip() 将当前正在构建的路径转换为当前的裁剪路径,默认情况下,canvas有一个与它自身一样大的裁切路径(也就是没有裁切效果)
tianyawhl
2019/04/04
7960
Canvas基础教程(章节1)
  这是我的第一篇Canvas 基础教程,我先简述一下什么是Canvas 。   H5 新增内容,允许脚本语言动态渲染图像,是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域,类似于其他通用的二维 API,通過一套完整的绘图函数来动态生成图形。一些可能的用途,包括使用 Canvas 构造图形,动画,游戏和图片。 Canvas 对象的属性 height 属性:   画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 150。 width 属性:   画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。 那Canvas 绘制的图形或动画有哪些优点呢?
我不是费圆
2020/10/10
1.3K0
Canvas基础教程(章节1)
【Web技术】774- 基于canvas完成图片裁剪工具
本文是基于canvas去实现图片裁剪工具。因为canvas代码还是比较长的,尽量写思路,完整代码已放在github上。
pingan8787
2020/11/19
1.4K1
【Web技术】774- 基于canvas完成图片裁剪工具
第154天:canvas基础(一)
​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。
半指温柔乐
2018/09/11
8030
第154天:canvas基础(一)
相关推荐
Canvas基本动画-太阳系的动画 原
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验