每日分享！canvas的使用~
今天大概的说下canvas的使用~
<!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>Document</title>
</head>
<body>
<!-- 首先写一个canvas便签 -->
<canvas id="canvas" width="400" height="400"></canvas> <script>
// 首先说下需求 绘制一条直线
//第一步获取canvas
var canvas = document.getElementById('canvas')
// 第二步 获取上下文
var ctx = canvas.getContext('2d')
// 第三步 移动直线
ctx.moveTo(10,20) // 传递两个才参数 对应的x,y 坐标
// 第四步 绘制直线
ctx.lineTo(100,20)
// 可以设置绘制画笔的颜色
ctx.strokeStyle = 'red'
// 第五步 描绘直线
ctx.stroke() </script>
</body>
</html>
注意：在使用canvas的时候，特别需要注意的是canvas本身有两个属性。分别是width和height ~ 这两个属性值是代表的canvas的宽高！很多人会觉得这个宽高和样式的宽高可以用style去设置。但是这样设置会出现什么问题呢？ - 记住：canvas的宽高必须要在内联中去写，写的是真正的改变canvas的大小，如果用style去定义的话，这个不是真的意义的改变了canvas的宽高，而是改变了像素比。（在这里也需要注意的是： canvas的默认宽高是300X150）
下面介绍下canvas的坐标是如何样的
记住canvas是这样的坐标系结构， 正如我上图演示的一个画一个直线的demo可以看到
通过画出一个直线。我们基本上可以认识到canvas的工具的了
。。具体的用法可以转至： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API 去查看-
每日分享！canvas的使用~的更多相关文章
- 技术分享: Canvas 系列
技术分享: Canvas 系列 SVG 导出 分享截图 加密水印 游戏 场馆图,选派选座 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可 ...
- 微信小程序之生成图片分享 二维码分享 canvas绘制
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 添加画布 首先,在小程序里进行绘图操作需要用到<canvas>组件,步骤大致分为以 ...
- 每日分享！～ 使用js原生方式对拖拉元素（鼠标的事件）
一个元素放置页面上.如何进行拖拉,实现想放哪里就放哪里的效果呢? 效果如下: 如果让你写这个效果,你会如何写呢? --- 思路分析:我首先想到的是,对这个元素先绑定一个事件.(什么事件? 那当然是鼠标 ...
- 每日分享！介绍Css 盒模型！
如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...
- 分针网—每日分享：HTML解析原理
标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理 这我得加把劲了.我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了... 以下部分来自hand ...
- 分针网——每日分享： jquery选择器的用法
jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...
- 分针网—每日分享： 怎么轻松学习JavaScript
js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径. 我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路& ...
- 每日分享！JavaScript的鼠标事件（11个事件）
鼠标的11个事件 具体的事件解释如下: click:按下鼠标(通常是按下主按钮)时触发. dblclick:在同一个元素上双击鼠标时触发. mousedown:按下鼠标键时触发. mouseup:释放 ...
- 每日分享！～ JavaScript(拖拽事件）
浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...
随机推荐
- __iter__ 和 __next__
class F: def __init__(self,x): self.x = x def __iter__(self): #把对象 变成可迭代对象 return self def __next__( ...
- Eurekalog
Eurekalog E:\Program Files (x86)\Neos Eureka S.r.l\EurekaLog 7\Packages\Studio25\EurekaLogComponent ...
- upcast 做了什么操作
把子类中仅仅继承而来的成员,赋值给父类. 但是,不会改变虚表!因为这个obj的类型没变. #include <stdio.h> using namespace std; class A{ ...
- mysql 乐观锁实现
一.为什么需要锁(并发控制)? 在多用户环境中,在同一时间可能会有多个用户更新相同的记录,这会产生冲突.这就是著名的并发性问题. 典型的冲突有: 1.丢失更新:一个事 ...
- epoll的LT和ET(转)
1 socket IO事件 1.1 读事件 读事件:句柄从不可读变成可读,或者句柄写缓冲区有新的数据进来且超过SO_RCVLOWAT. 常见的产生读事件有如下几种: socket有一个未清除的错误.如 ...
- 自然语言处理的CNN模型中几种常见的池化方法
自然语言处理的CNN模型中几种常见的池化方法 本文是在[1]的基础上进行的二次归纳. 0x00 池化(pooling)的作用 首先,回顾一下NLP中基本的CNN模型的卷积和池化的大致原理[2].f ...
- Django 重写用户模型
AUTH_USER_MODEL = 'myapp.MyUser' django——重写用户模型 Django内建的User模型可能不适合某些类型的项目.例如,在某些网站上使用邮件地址而不是用户名作为身 ...
- Linux Oracle安装
lsnrctl status // 查看linux系统oracle的监听状态lsnrctl start // 启动linux系统oracle的监听状态 sqlplus /nolog // 连接 ...
- [leetcode]16. 3Sum Closest最接近的三数之和
Given an array nums of n integers and an integer target, find three integers in nums such that the s ...
- node.js 使用 net 模块模拟 websocket 握手，进行数据传递。
websocket 是一种让浏览器与服务器之间建立持久的连接,并能进行双向数据传输的一种协议. websocket 属性应用层协议,基于tcp传输协议,并复用http的握手通道. 一.如何进行webs ...