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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <!-- 创建一个宽300px, 高300px的画布环境 -->
  9.     <canvas id="c1" width="300" height="300"></canvas>
  10. </body>
  11. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <canvas id="c1" width="300" height="300"></canvas>
  9.     <script>
  10.         var canvas = document.getElementById("c1");
  11.         var ctx = canvas.getContext("2d");
  12.         ctx instanceof CanvasRenderingContext2D; // true
  13.     </script>
  14. </body>
  15. </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. Maven的几种新建项目方式

    1. 使用原型创建Maven的java工程 (1) 选择 JDK 的版本,勾选“使用原型创建”,选中 maven-archetype-quickstart,下一步. (2) 填写公司名,填写项目名,修 ...

  2. vue中书写JSX一些坑-特殊属性名

    举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中 const Sub = ({data, props}) => { conso ...

  3. Spring Security整合JWT，实现单点登录，So Easy~！

    前面整理过一篇 SpringBoot Security前后端分离,登录退出等返回json数据,也就是用Spring Security,基于SpringBoot2.1.4 RELEASE前后端分离的情况 ...

  4. delphi10.3.1不支持.net 5

    delphi10.3.1不支持.net 5 安装DELPHI的前提条件:WINDOWS必须安装有.NET. DELPHI安装程序在安装的时候会自动检测.NET是否已经安装好,如果发现没有,它会报错,并 ...

  5. python笔记4 内置函数,匿名函数.递归函数 面向对象(基础, 组合,继承)

    内置函数 eval和exec eval :执行字符串中的代码并将结果返回给执行者,有返回值 exec:执行字符串中的代码,往往用于执行流程语句,没有返回值. s1 = '1+2' s2 = 'prin ...

  6. 关于Jetson Kit开发相关资料

    首先是nVidia官方对于Jetson Kit的介绍: http://www.nvidia.com/object/jetson-tk1-embedded-dev-kit.html https://de ...

  7. 19 Flutter仿京东商城项目 商品详情 底部浮动导航布局 商品页面布局

    效果: widget/JdButton.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.da ...

  8. Qt编写安防视频监控系统11-动态换肤

    一.前言 Qt中的动态换肤技术是非常一流的,直接调用qApp->setStyleSheet(qss);就可以对整个应用程序进行换肤,如果样式表内容不多,或者对应的贴图不对,效率还是蛮好的,不过据 ...

  9. jpa基于按annotation的hibernate主键生成策略

    JPA注解持久化类很方便,需要jar包:ejb3-persistence.jar下载 一.JPA通用策略生成器 通过annotation来映射hibernate实体的,基于annotation的hib ...

  10. php文件断点上传

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...