每日分享！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)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...
随机推荐
- python大法好——面向对象
python大法好——面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没 ...
- ADO.NET 基本操作
概要 ADO.NET是.NET框架中的重要组件,主要用于完成C#应用程序访问数据库,类似于PHP中的PDO 使用 连接数据库 (Connection对象) 1. 连接字符串 基本语法:数据源(Data ...
- React将某段文字插入到某个元素里
最基本使用: 引入依赖文件: <script src="https://unpkg.com/react@16/umd/react.development.js">< ...
- CSS vertical-align属性详解
. 首页 博客园 联系我 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. 留言评论 返回顶部 前言:关于vertical-align属性 vertical-ali ...
- delphi WebBrowser IPv6
We discovered one or more bugs in your app when reviewed on iPhone running iOS 11.4 on Wi-Fi connect ...
- TCC细读 - 1 例子流程
http://www.iocoder.cn/categories/TCC-Transaction/ https://github.com/changmingxie/tcc-transaction 细读 ...
- source tree常用功能
参考地址: https://blog.csdn.net/weixin_39568744/article/details/81413198
- 转 cxgrid属性说明
TCXGRID控件:属性:ActiveLevel: 当前层BorderStyle: 窗口风格Color: 颜色FocusedView: 当前View;Font: 字体LevelTabs: 类似Page ...
- 简单定时器的Java实现
这两个类使用起来非常方便,可以完成我们对定时器的绝大多数需求 Timer类是用来执行任务的类,它接受一个TimerTask做参数 Timer有两种执行任务的模式,最常用的是schedule,它可以以两 ...
- actuator/hystrix.stream 没有反应的方法
http://localhost:8086/actuator/hystrix.stream 在启动类加上,就ok了 @Bean public ServletRegistrationBean hystr ...