<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
body,html{
font-size: 1rem;
}
#myCanvas{
width: 100%;
height: 25%;
background-color: #ccc;
}
div span{
font-size: 1.8rem;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var html = document.getElementsByTagName("html")[0];
var screenW = window.document.documentElement.clientWidth;
html.style.fontSize = (screenW/640)*20 + "px";
console.log(html.style.fontSize)
var c= document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(150,70);
ctx.lineTo(120,50);
ctx.lineTo(100,50);
ctx.lineTo(90,50);
ctx.lineTo(70,60);
ctx.lineTo(10,50);
ctx.stroke();
</script>
</body>
</html>

canvas画布的更多相关文章

  1. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  2. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）

    1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...

  4. 关于使用Css设置Canvas画布大小的问题

    问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

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

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

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

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

  7. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  8. 更新——Canvas画布动画效果之实现倒计时

    Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

  9. Canvas 画布组件（官网翻译）

    Canvas画布 The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object w ...

  10. CANVAS画布与SVG的区别

    CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...

随机推荐

  1. android学习10——对顶点着器和片段着色器的理解

    图形都是点,线,面组成的.顶点着器指定了顶点的位置,大小和颜色. 看一个顶点着色器的代码 attribute vec4 a_Position; attribute float a_PointSize; ...

  2. 每天一个linux命令(33)--du命令

    Linux  du命令也是查看使用空间的,但是与 df  命令不同的是 Linux du 命令是对文件和目录磁盘使用的空间的查看,还是和df 命令有一些区别的. 1.命令格式: du  [选项] [文 ...

  3. H5微信播放全屏问题

    在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送等问题 解决办法:给vi ...

  4. JS判断是否为数字或为空

    function checkcc() {     var reg = new RegExp("^[0-9]*$");     var obj = document.getEleme ...

  5. 2429: [HAOI2006]聪明的猴子

    2429: [HAOI2006]聪明的猴子 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 448  Solved: 309[Submit][Statu ...

  6. intent，实现两个活动之间数据的传递

    一.Intent 可以启动一个活动,也可以在启动活动的时候传递数据.intent中提供了putExtra()方法,它可以把我们想要传递的数据暂存在intent中,启动了另一个活动后,通过getInte ...

  7. Python第五章__模块介绍，常用内置模块

    Python第五章__模块介绍,常用内置模块 欢迎加入Linux_Python学习群  群号:478616847 目录: 模块与导入介绍 包的介绍 time &datetime模块 rando ...

  8. 挂接命令(mount） 【转】

    收藏些文章,以后可能有用,文章出自:http://tutu.spaces.eepw.com.cn/articles/article/item/70737 挂接命令(mount) 首先,介绍一下挂接(m ...

  9. java-信息安全（七）-基于非对称加密，对称加密等理解HTTPS

    概述 java-信息安全(一)-BASE64,MD5,SHA,HMAC java-信息安全(二)-对称加密算法DES,3DES,AES,Blowfish,RC2,RC4 java-信息安全(四)-数据 ...

  10. RabbitMQ-从基础到实战（1）— Hello RabbitMQ

    转载请注明出处 1.简介 本篇博文介绍了在windows平台下安装RabbitMQ Server端,并用JAVA代码实现收发消息 2.安装RabbitMQ RabbitMQ是用Erlang开发的,所以 ...