<!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. loadrunner测试结果分析

    LR性能测试结果样例分析 测试结果分析 LoadRunner性能测试结果分析是个复杂的过程,通常可以从结果摘要.并发数.平均事务响应时间.每秒点击数.业务成功率.系统资源.网页细分图.Web服务器资源 ...

  2. Java显式锁学习总结之六：Condition源码分析

    概述 先来回顾一下java中的等待/通知机制 我们有时会遇到这样的场景:线程A执行到某个点的时候,因为某个条件condition不满足,需要线程A暂停:等到线程B修改了条件condition,使con ...

  3. linux 下 zookeeper安装

    1.安装zookeeper-3.4.6cd /usr/soft#解压zookeeper 安装包tar -zvxf zookeeper-3.4.6#拷贝安装包到安装目录cp zookeeper-3.4. ...

  4. 从 http 升级到 https 过程中遇到的一些问题

    Apple 2017年1月1号起要求Appstore 上线的应用都必须使用 https 加密请求协议,在二月份又改为建议 从 http 升级为 https 协议,此为背景. 公司做的APP同时在App ...

  5. 程序点滴001_Python模拟点阵数字

    尝试过很多编程语言,写过不少程序(当然,基本上都是些自娱自乐或给自己用的工具类的小玩意儿),逐渐认识到编写程序是一个不断完善.不断优化的过程——编程首先要有一个想法(目标),围绕这个目标形成最基本的功 ...

  6. C#语言基础——语句

    1·语句是指程序命令,都是按照顺序执行的.语句在程序中的执行顺序称为"控制流"或"执行流".根据程序对运行时所收到的输入的响应,在程序每次执行时控制流可能有所不 ...

  7. LeetCode 笔记总结

    前言 之前把一些LeetCode题目的思路写在了本子上,现在把这些全都放到博客上,以后翻阅比较方便. 题目 99.Recover Binary Search Tree 题意 Two elements ...

  8. Tyvj P1813 [JSOI2008]海战训练

    P1813 [JSOI2008]海战训练 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 为了准备高层峰会,元首命令武装部队必须处于高度戒备.警察将监视每一条 ...

  9. 导航栏转场动画CATransition

    CATransition动画来实现, 下面的代码是跳转到下一个视图: CATransition *animation = [CATransition animation]; [animation se ...

  10. SQL_Join 小总结

    原文出自 :http://www.nowamagic.net/librarys/veda/detail/936 对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多in ...