知识点
相关文章
更多最近更新
更多HTML5 Canvas 制作一个“在线画板”
2019-03-12 13:52|来源: 领悟书生
内容摘要:HTML5 Canvas 部分线条事件,JQuery 部分鼠标事件,然后利用这些知识制作一个“在线画板”的小应用
画板的基本原理
Canvas 部分线条事件
var canvas = document.getElementById('mycanvas');
var p100=canvas.getContext("2d");
p100.lineWidth=5; //定义线条宽度
p100.strokeStyle=“red”; //定义线条颜色
p100.moveTo(mouseX,mouseY); //起始位置
p100.lineTo(mouseX,mouseY); //终止位置
p100.stroke(); //结束图形JQuery部分线条事件
$( ).mousedown //鼠标按下时
$( ).mousemove //鼠标移动时
$( ).mouseup //鼠标抬起时
$("#mycanvas").mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft; //获得区域坐标x
var mouseY = e.pageY - this.offsetTop; //获得区域坐标y
});在线画板案例
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>HTML5视频教程-canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
#mycanvas{ border:1px solid #ccc;}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var p100=canvas.getContext("2d");
p100.lineWidth=5;
p100.strokeStyle="red";
var pp=false;
//当鼠标按下时
$("#mycanvas").mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
pp=true;
//起始位置
p100.moveTo(mouseX,mouseY);
});
//当鼠标抬起时
$("#mycanvas").mouseup(function(e){
pp=false;
});
//当鼠标移动时
$("#mycanvas").mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if(pp){
//终止位置
p100.lineTo(mouseX,mouseY);
//结束图形
p100.stroke();
}
});
</script>
</body>
</html>案件效果
本文链接：HTML5 Canvas 制作一个“在线画板”，由领悟书生原创
转载请注明出处【http://www.656463.com/article/334】
相关问答
更多-
HTML5 canvas图像问题(HTML5 canvas Image issue)[2023-04-07]
改变这个： wall1.onload = drawwall(arg1, arg2, arg3); 对此 wall1.onload = function() { drawwall(arg1, arg2, arg3); }; 这是必要的，因为您需要为onload属性分配一个函数。 在错误的代码中，您分配了调用函数的结果。 Change this: wall1.onload = drawwall(arg1, arg2, arg3); To this wall1.onload = function() { d ... -
图像画布HTML5的数组(Array of image canvas HTML5)[2024-03-31]
您正试图在回调中引用索引变量。 执行回调时，此变量的值超出了数组的范围： context.drawImage(tableImage[**i**], x, y); 您需要以另一种方式提取适用的图像元素： tableImage[i].onload = function (event) { context.drawImage(event.target, x, y); }; 现在我注意到你的x和y坐标也在闭包中被引用。 这也行不通。 您需要将x和y存储为图像元素的属性或数据。 你可以这样做： var i ... -
步步高这样的棋盘游戏需要很少的动画和/或精美的动画。 换句话说，它是一个相对“简单”的2D游戏（相对于DOM操作和Canvas 2d上下文的可能性）。 我假设你想在2d完成它。 这意味着您可以使用这两种方法来创建游戏; 他们都会做得很好。 真正的问题是：你更了解哪种技术，你更喜欢？ 如果您不知道答案，请开始研究这两种技术。 阅读简单的教程，使用一些代码并获得两种技术的要点。 然后做出决定。 帆布 亲：更先进的技术可用 亲：更容易分发到游戏门户网站 con：有点难以掌握imo con：容易搞定（内存和性能明智 ...
-
确定屏幕上的哪个对象在html5 canvas javascript中被点击？(Identify which object on screen clicked in html5 canvas javascript?)[2022-06-27]
循环访问单元对象，并确定如下所示点击： // 'e' is the DOM event object // 'c' is the canvas element // 'units' is the array of unit objects // (assuming each unit has x/y/width/height props) var y = e.pageY, x = e.pageX, cOffset = $(c).offset(), clickedUnit; // ... -
这花了我15秒才找到。 玩它直到它得到你喜欢的。 $(document).ready(drawGaussian); var canvasContext; var points; var noise = 0; function drawGaussian() { canvasContext = document.getElementById("gaussian-canvas").getContext("2d"); document.getElementById("gaussian-canvas"). ...
-
你知道WebGL吗？ http://en.wikipedia.org/wiki/WebGL Do you know WebGL? http://en.wikipedia.org/wiki/WebGL
-
HTML5移动Canvas对象(HTML5 move Canvas object)[2023-03-29]
简短的回答：没有自动的方式来做到这一点。 长答案： -
计算出您想要绘制宽度和高度的正方形的位置。 完成后，只需先绘制一个较大的正方形，其宽度为2，高2，但中心点相同。 所以你绘制一个更大的正方形，然后在顶部绘制正常的正方形，然后给你一个正方形有边框的错觉 HTML CSS #canvas1{ border: solid 1px black; } 使用Javascript va ...
-
HTML5 Canvas动画问题(HTML5 Canvas animation issue)[2022-01-23]
两种解决方案 在将动画移动到新位置之前，重新绘制动画顶部的背景。 这种所谓的脏精灵技术 - 更快 - 更复杂。 在帧之间重绘整个画布 如果绘制背景是一个复杂的操作，只需将准备好的背景缓冲在另一个画布中以提高速度。 Two solutions Redraw the background on the top of animation before moving it to the new location. This so called dirty sprite technique - faster - mo ... -
不使用Javascript使HTML5 Canvas区域无法选择(Make HTML5 Canvas area unselectable without Javascript)[2022-02-23]
如果您不需要支持IE9，那么您确实可以使用用户选择（您需要为每个浏览器添加前缀：-ms - ， - moz-和-webkit-）。 选择仍然出现的原因可能是选择了比您想象的更高级别的元素。 例：