1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <!-- 创建一个宽300px, 高300px的画布环境 -->

    <canvas id="c1" width="300" height="300"></canvas>

</body>

</html>

2. 我们需要控制这个画布, 在画布里面绘制图形, 这时就需要通过js控制:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="c1" width="300" height="300"></canvas>

    <script>

        var canvas = document.getElementById("c1");

        var ctx = canvas.getContext("2d");

        ctx instanceof CanvasRenderingContext2D; // true

    </script>

</body>

</html>

完成了上面两步以后就可以认为是初始化了一个画布(canvas)环境.

怎样创建一个canvas画布环境的更多相关文章

  1. 用canvas画布画一个画板

    前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...

  2. django examples 学习笔记(1)创建一个独立的python环境

    pip install virtualenv   创建一个虚拟环境 virtualenv   my_env      创建一个独立的环境 source my_env/bin/activate   激活 ...

  3. canvas画布标签

    最近良师益友整理一些canvas的资料,加强学习了解! 当你创建一个<canvas>元素后,就拥有了它的绘图上下文. 一.简单图形 1.getContext()方法 为了在canvas上绘 ...

  4. 自学HTML5第四节（canvas画布详解）

    canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...

  5. 小教程：自己创建一个jQuery长阴影插件

    长阴影设计是平面设计的一个变体,添加了阴影,产生了深度的幻觉,并导致了三维的设计.在本教程中,我们将创建一个jQuery插件,通过添加完全可自定义的长阴影图标,我们可以轻松地转换平面图标. 戳我查看效 ...

  6. Docker实战之创建一个tomcat容器

    一.Docker与虚拟机的区别 二.Docker学习步骤 2.1:安装宿主操作系统 在VMVare中安装了Ubuntu 16.04.2 LTS (GNU/Linux 4.4.0-62-generic ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  9. ZeroMQ接口函数之 ：zmq_ctx_new – 创建一个新的ZMQ 环境上下文

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_ctx_new zmq_ctx_new(3)               ØMQ Manual - ØMQ/3.2 ...

随机推荐

  1. Redis启动后基础只是讲解

    1.单进程 epoll是Linux内核为处理大批量文件描述符而作了改进的epoll,是Linux下多路复用IO接口select/poll的增强版本, 它能显著提高程序在大量并发连接中只有少量活跃的情况 ...

  2. ubuntu 16.04 脚本开机自启动

    1.首先编写一个shell脚本文件,例如python_self_start.sh (nohup & 指定后台运行) #!/bin/bash nohup python3 /home/senset ...

  3. 文本处理三剑客之awk

    简介 awk是一种处理文本文件的语言,是一个强大的文本编辑工具.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分在进行各种分析处理. gawk 用法:gawk [optio ...

  4. 【分享】《美国数学本科生，研究生基础课程参考书目（个人整理）》[DJVU][VERYCD]

    目录: 第一学年 几何与拓扑: 1.James R. Munkres, Topology:较新的拓扑学的教材适用于本科高年级或研究生一年级: 2.Basic Topology by Armstrong ...

  5. vue实现全选框效果

    vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...

  6. Python 自学笔记（三）

    1.列表 1-1.什么是列表 列表的代码格式:teacher=['张三','李四','王五'] 这里的['张三','李四','王五'] 就是一个列表,一个列表需要用中括号[ ]把里面的各种数据框起来, ...

  7. Flutter移动电商实战 --（29）列表页_商品列表数据模型建立

    简历数据模型 json生成dart类的网站: https://javiercbk.github.io/json_to_dart/ json数据 {"code":"0&qu ...

  8. Flutter移动电商实战 --（22）JSON解析和复杂数据模型转换技巧

    json转Model类 创建model文件夹,在里面新建category.dart类 主要根据这个json来分析我们要做成类的样子 { "code": "0", ...

  9. java 测试框架

    项目开发过程中使用的单元测试框架有Junit.TestNG以及Mockito,Junit和TestNG使用的比较多,Mockito最近才开始使用. TestNG与JUnit的相同点 1. 使用anno ...

  10. PLSQL Developer配置OCI连接远程数据库

    转: PLSQL Developer配置OCI连接远程数据库 当前环境: 本机系统:Win7 32位 PLSQL版本:9.06 数据库版本:10.2 32位 下面开始具体操作. 1.在Oracle官网 ...