html5实现在线动态画板,HTML5 canvas实现一个简易画板

初学javascript，希望和大家交流。

首先创建一个canvas

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var cx = $('#myCanvas').offset().left;

var cy = $('#myCanvas').offset().top;

//初始化画板

var init = function(){

for(var x = 0.5 ; x < 500 ;x += 10){

cxt.moveTo(x,0);

cxt.lineTo(x,500);

}

for(var y = 0.5 ; y < 500 ;y += 10){

cxt.moveTo(0,y);

cxt.lineTo(500,y);

}

cxt.strokeStyle="#eee";

cxt.stroke();

}

init();

//上下文环境，用于记录鼠标的轨迹

var drawContext = function(x,y){

var end_x = 0;

var end_y = 0;

return function(x,y){

cxt.lineTo(x,y);

cxt.stroke();

end_x = x;

end_y = y;

cxt.moveTo(end_x,end_y);

}

var dc;

//每一次落笔(鼠标单击)都创建一个上下文环境

function pMoveTo(e){

e=e||window.event;

var _x = e.clientX - cx;

var _y = e.clientY - cy;

cxt.moveTo(_x,_y);

cxt.beginPath();

cxt.strokeStyle="red";

dc = drawContext(_x,_y);

}

//画画

function draw(e){

e=e||window.event;

var _x = e.clientX - cx;

var _y = e.clientY - cy;

if(dc){

dc(_x,_y);

}

//鼠标放开，则释放这次落笔

function cancel(){

if(dc){

dc = null;

}

else{

return;

}

html5实现在线动态画板,HTML5 canvas实现一个简易画板相关推荐

怎么画图自动生成HTML,用canvas写一个简易画图工具
本文将为您描述用canvas写一个简易画图工具,具体操作方法: Document style="border:1px solid #000000;">您的浏览器不支持canv ...
基于html5的在线教育,基于HTML5的在线学习系统的设计与实现
基于HTML5的在线学习系统的设计与实现发布时间:2019-11-18所属分类:科技论文浏览:1次摘要: 摘要: 在线课程学习网站的发展迅速,吸引了广大用户.基于 HTML5 的在线学习系统经 ...
qt制作一个画板_Qt 一个简易画板实现(Graphics View).pdf
Qt ⼀个简易画板的实现(Graphics View) Qt 学习之路(32): ⼀个简易画板的实现(Graphics View) 这⼀次将介绍如何使⽤ Graphics View 来实现前⾯所说的画 ...
用canvas画一个简易的机器猫头像
用canvas画一个机器猫的头像,原图如下: 代码实现效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <he ...
用java编写一个简易功能画板_用Java语言编写一个简易画板
讲了三篇概博客的概念,今天,我们来一点实际的东西.我们来探讨一下如何用Java语言,编写一块简易的画图板. 一.需求分析无论我们使用什么语言,去编写一个什么样的项目,我们的第一步,总是去分析这个项目 ...
html5实现在线动态画板,Javascript HTML5 Canvas实现的一个画板
DEMO6:自定义画板浏览器不支持canvas YELLOW RED BLUE GREEN WHITE BLACK 4PX 8PX 16PX EXPORT var canvas = document ...
HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
html5摄像头在线演示,基于HTML5实现的超酷摄像头（HTML5 webcam）摄
}); WebRTC可能是来岁最受关心的HTML5标准了,Mozilla为此开辟了一套协帮你节造软件的API,例如,摄像头,麦克风,或者是加快表.你可以或许不依赖其它的插件来调用你需要的本机软件设备. ...
用canvas实现一个简易绘图工具
先看效果这里可以选择颜色,从而进行在600px*400px画布中,随便画 ★HTML架构部分  <div><h3>简易绘图工具& ...
qt制作一个画板_Qt学习之路(32): 一个简易画板的实现(Graphics View)-阿里云开发者社区...
这一次将介绍如何使用Graphics View来实现前面所说的画板.前面说了很多有关Graphics View的好话,但是没有具体的实例很难说究竟好在哪里.现在我们就把前面的内容使用Graphics ...

html5实现在线动态画板,HTML5 canvas实现一个简易画板

html5实现在线动态画板,HTML5 canvas实现一个简易画板相关推荐

最新文章

热门文章