每日分享！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)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...
随机推荐
- JUC详解
一.Java多线程 -- JUC包源码分析1 -- CAS/乐观锁 乐观锁其实就是不加锁,用CAS + 循环重试,实现多个线程/多个客户端,并发修改数据的问题 使用AtomicStampedRefer ...
- MYSQL性能优化（3）
优化数据库对象 1.优化表的数据类型 select * from tbl1 procedure analyse(16,256) ,会输出优化建议,结合情况优化 2.拆分表(仅Myisam) 2.1 纵 ...
- javascript正则表达式中 (?=exp)、(?<=exp)、(?!exp)
(?=exp) 百度百科给的解释:非获取匹配,正向肯定预查,在任何匹配pattern的字符串开始处匹配查找字符串,该匹配不需要获取供以后使用.例如,“Windows(?=95|98|NT|2000) ...
- springcloud-知识点总结（一）：Eureka
1.Spring Cloud简介 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载 ...
- as3:sprite作为容器使用时，最好不要指定width,height
除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...
- web设计工具
1.工具 WYSIWYG_Web_Builder_12 2.网页 https://bootstrapstudio.io/#purchase
- Pains and Sickness 学习笔记
Headaches can be very painful and can last for a long time. If you have a headache, your head hurts. ...
- java 期末考试复习
//Scanner这样写? Scanner input = new Scanner(System.in); //不断获得下一个单词 names[i] = toTitleCase(input.nex ...
- 本机连接Spark Standalone--最简单的spark调试方式
为了既能远程连接spark 查看ui 又能本地练习 安装简单 去官网 http://spark.apache.org/downloads.html 选择对应版本下载 tar包 解压 tar ...
- 小豆包的学习之旅：占用概率栅格地图和cost-map
接下来将制图和定位问题分别进行介绍.这两个问题可以视为SLAM过程中两个相互联系的子问题,但是也可以视为两个单独的问题.虽然说SLAM问题是鸡和蛋的问题,但是在实际处理过程中总是有先后的.为了简化问题 ...