html5 一个页面两个画布,使用HTML5 canvas完成的一个网页白板
该代码能够使用canvas对象完成的一个基本功能。仅供大家参考。
Title
var ball;
var mouseX = 100;
var mouseY = 100;
var angle = 0;
var radius = 0;
var ballstyle = "."
var ballcolor = "#FF0000";
var allzindex = 0;
var cav_elem;
var cav_context;
//old positon
var opos;
function draw(){
ball = document.createElement("p");
ball.style.position = "absolute";
ball.style.color = ballcolor;
ball.style.zIndex = allzindex+1;
ball.innerHTML = ballstyle;
document.body.appendChild(ball);
document.all.selected = false;
ball.style["left"] = mouseX+ "px";
ball.style["top"] = mouseY+ "px";
}
function draw_cav(npos){
if(opos){
cav_context.beginPath();
// Start from the top-left point.
cav_context.moveTo(opos.x,opos.y);
cav_context.lineTo(npos.x,npos.y);
cav_context.stroke();
cav_context.closePath();
}
}
function MousePos(e){
eee = e || window.event;
var x,y;
if(!document.all){
x = e.pageX;
y = e.pageY;
}
else{
x = event.clientX + document.documentElement.scrollLeft;
y = event.clientY + document.documentElement.scrollTop;
}
return {x:x,y:y};
}
function setXY(e){
eee = e || window.event;
var pos = MousePos(e);
mouseX = pos.x;
mouseY = pos.y;
//if(e.button == 1){
draw_cav(pos);
//}
opos = pos;
}
window.onload = function(){
//get canvas and context
var elem = document.getElementById('myCanvas');
if (elem && elem.getContext) {
cav_elem = elem;
var context = elem.getContext('2d');
if (context) {
cav_context = context;
//cav_context.fillRect(0, 0, cav_elem.width, cav_elem.height);
}
}
//add mouse action
document.documentElement.onmousemove = function(e){
eee = e || window.event;
setXY(e);
};
}
Fallback content, in case the browser does not support Canvas.
html5 一个页面两个画布,使用HTML5 canvas完成的一个网页白板相关推荐
- 一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突
在vue中如何处理同一个页面中有多个swiper,首先我们需要分2中情况: 1.如果在vue中采用 Vue-Awesome-Swiper,如果采用这种方式的话,可以给每个swiper组件添加一个cla ...
- 从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法)
从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法) 转载,点击跳转
- Html5的页面基本结构标签片段,HTML5基本网页结构以及标签的改变
一.HTML5崭新的页面布局: 1.传统的HTML页面布局: 2.HTML5布局: 3.HTML5布局使用的标签: (1)header元素:header元素表示页面总的一个内容区块或者整个页面的标题: ...
- html5登录页面自动记住密码,使用HTML5中的localStorage实现记住密码功能
这篇文章主要介绍了html5超简单的localStorage实现记住密码的功能实现,非常具有实用价值,需要的朋友可以参考下 HTML5 提供了两种在客户端存储数据的新方法:localStorage - ...
- django一个html先后两个form,django 一个页面两个表单 怎么提交
收到一只叮咚 1234567891011121314151617181920212223242526272829办法1.同一个页面中建立两个表单 各自提交: 1234567812345678办法2:如 ...
- 用html5做的柱状图,使用h5新特性canvas简单生成一个柱状图
要展现一种数据,最直观的方式便是生成数据图,图例永远要比文字说明更加的清晰明了.因此,今天来生成一个利用canvas画布上的柱状图. 首先,先设置一个x,y轴,以便于柱状图的生成 var canvas ...
- html5微信页面制作,微信上的html5页面是怎么制作出来的?自己怎么制作微信网页链接?...
相关问题 艾奇MTV电子相册制作软件:http://www.crxz.com/soft/spqt/196.html 公会简介公会是指在游戏中由一群志同道合.有共同追求的人们组成的团体. 网上有教程,网 ...
- python爬虫如何从一个页面进入另一个页面-Python爬虫 (一):爬取一个简单的静态网页...
版本:python3.7 平台:windows10 工具 :pycharm 断断续续学习了py3爬虫2周左右的时间,发现自己学习的过于零散化,所以想通过这个专栏系统的整理下自己所学过的知识.如有错误, ...
- div内嵌网页ajax,Div里面载入另一个页面的实现(取代框架)(AJax)(转)
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...
最新文章
- python3正则表达式符号和用法
- 系统运维包括哪些内容_电力电缆到货验收包括哪些内容?
- python函数绘制5个太阳花_python_bomb----函数
- TrueNorth:IBM的百万神经元类人脑芯片
- 开机报警disk boot sector is to be modified
- 在swt中获取jar包中的文件 uri is not hierarchical
- QGraphicsItem获取不到鼠标事件
- C#中发送消息给指定的窗口到消息循环
- 计算机减法英语,英语加减乘除的表达
- TCP协议-相关面试题
- 现代软件工程讲义 个人项目和结对项目练习 四则运算
- Java LinkedHashMap 逆序遍历
- 事件和数据回发机制的实现
- 开启MyBatis(一)
- Java 下一代: Groovy、Scala 和 Clojure
- c51单片机矩阵键盘1602计算器_基于AT89C51单片机的十进制计算器系统设计
- 汽车漫谈1:汽车的研发到制造过程
- PAC(期间平均成本)
- DIV布局强制英文换行(div英文不怎么给力啊~ 只有用别的方法啦)
- 字节跳动校招前端面经(2021.03.16)
热门文章
- 从零开始打造一款基于SpringBoot+SpringCloud的后台权限管理系统
- HF溶液中二氧化硅刻蚀机理
- Java中有了基本类型为什么还要有包装类型(封装类型)
- 国内独立站申请Stripe,100%成功
- c语言 qq窗口抖动,仿QQ窗口抖动
- 正确认识内卷(减少精神内耗)
- Spark入门实战系列--8.Spark MLlib(下)--机器学习库SparkMLlib实战
- file not recognized: File format not recognized
- 编译报错file format not recognized; treating as linker script
- Hadoop中的Namenode、Datanode和Secondary Namenode