今天大概的说下canvas的使用~

canvas是H5新增的一个元素，可以用来在canvas上绘制一些图形！
如何使用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的使用~的更多相关文章

  1. 技术分享: Canvas 系列

    技术分享: Canvas 系列 SVG 导出 分享截图 加密水印 游戏 场馆图,选派选座 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可 ...

  2. 微信小程序之生成图片分享 二维码分享 canvas绘制

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 添加画布 首先,在小程序里进行绘图操作需要用到<canvas>组件,步骤大致分为以 ...

  3. 每日分享！～ 使用js原生方式对拖拉元素（鼠标的事件）

    一个元素放置页面上.如何进行拖拉,实现想放哪里就放哪里的效果呢? 效果如下: 如果让你写这个效果,你会如何写呢? --- 思路分析:我首先想到的是,对这个元素先绑定一个事件.(什么事件? 那当然是鼠标 ...

  4. 每日分享！介绍Css 盒模型！

    如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...

  5. 分针网—每日分享：HTML解析原理

    标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理   这我得加把劲了.我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了...   以下部分来自hand ...

  6. 分针网——每日分享： jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  7. 分针网—每日分享： 怎么轻松学习JavaScript

    js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.   我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路& ...

  8. 每日分享！JavaScript的鼠标事件（11个事件）

    鼠标的11个事件 具体的事件解释如下: click:按下鼠标(通常是按下主按钮)时触发. dblclick:在同一个元素上双击鼠标时触发. mousedown:按下鼠标键时触发. mouseup:释放 ...

  9. 每日分享！～ JavaScript(拖拽事件）

    浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...

随机推荐

  1. BOM （字节顺序标记）

    BOM(Byte Order Mark):字节顺序标记,出现在文本文件头部,Unicode编码标准中用于标识文件是采用哪种格式的编码. 注:计算机内部数据存储都是二进制的,只有知道一段数据的二进制存储 ...

  2. 30个php操作redis常用方法代码例子(转载)

    1.connect 描述:实例连接到一个Redis.参数:host: string,port: int返回值:BOOL 成功返回:TRUE;失败返回:FALSE示例: $redis = new red ...

  3. centos安装tree命令

    centos安装tree命令 sudo yum -y install tree windows安装tree命令 我的另一篇

  4. spring @transactional 注解事务

    1.在spring配置文件中引入<tx:>命名空间 <beans xmlns="http://www.springframework.org/schema/beans&qu ...

  5. 550 5.7.1 Client does not have permissions to send as this sender

    收发邮件时出现以上这种情况,系统提示550 5.7.1 Client does not have permissions to send as this sender,这是什么原因赞成的呢? 活动目录 ...

  6. P1880 [NOI1995]石子合并-（环形区间dp）

    https://www.luogu.org/problemnew/show/P1880 解题过程:本次的题目把石子围成一个环,与排成一列的版本有些不一样,可以在后面数组后面再接上n个元素,表示连续n个 ...

  7. Java学习笔记（十五）：import关键字

  8. Tomcat常用设置及安全管理规范

    前言 随着公司内部使用Tomcat作为web应用服务器的规模越来越大,为保证Tomcat的配置安全,防止信息泄露,恶性攻击以及配置的安全规范,特制定此Tomcat安全配置规范.注意:  本文章从htt ...

  9. 545. Boundary of Binary Tree二叉树的边界

    ［抄题］: Given a binary tree, return the values of its boundary in anti-clockwise direction starting fr ...

  10. Linux安装配置Redis，CentOS7下安装Redis教程

    1.下载Redis wget https://download.redis.io/releases/redis-3.0.4.tar.gz 2 . 解压Redis .tar.gz 3 . 编译安装Red ...