HTML5 canvas lineTO()方法如何在同一个画布画不同粗细的,颜色的线条...
发布网友
发布时间:2022-04-29 15:01
我来回答
共5个回答
懂视网
时间:2022-04-20 02:57
本篇文章给大家带来的内容是关于canvas橡皮筋式线条绘图的方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
什么叫橡皮筋式
指画图时橡皮筋一样伸缩自如。。
例子如下
思路
思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的思路
mousedown:记录start位置,drag(记录是否处于拖动状态)设置为true,getImageData(橡皮筋效果关键1)
mousemove:获取拖动时的位置pos,putImageData(对应getImageData,橡皮筋效果关键2),根据pos与start画直线
mouseup:drag恢复为false
关键就在于putImageData()与getImageData()这两个canvas的方法,putImageData()记录了鼠标点下时的图像,getImageData()对应还原。如果没有执行这两个方法就会出现以下的效果
putImageData()相当于把“扫描”出来的线都擦掉
代码
<canvas id="canvas" width="600" height="400" style="border: 1px solid black;"> </canvas>
<script type="text/javascript">
let canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect()获取元素位置
canvasTop = canvas.getBoundingClientRect().top;
let imageData; //记录图像数据
let start = new Map([['x',null],['y',null]]);
let drag = false;//记录是否处于拖动状态
canvas.onmousedown = function (e) {
let pos = positionInCanvas(e, canvasLeft, canvasTop);
start.set('x', pos.x);
start.set('y', pos.y);
drag = true;
//记录imageData
imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
}
canvas.onmousemove = function (e) {
if(drag === true){
let pos = positionInCanvas(e, canvasLeft, canvasTop);
//相当于把扫描出来的线都擦掉,重新画
ctx.putImageData(imageData, 0, 0);
ctx.beginPath();
ctx.moveTo(start.get('x'), start.get('y'));
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
}
}
canvas.onmouseup = function (e) {
drag = false;
}
function positionInCanvas (e, canvasLeft, canvasTop) {//获取canvas中鼠标点击位置
return {
x:e.clientX - canvasLeft,
y:e.clientY - canvasTop
}
}
</script>
热心网友
时间:2022-04-20 00:05
是这样的,建议在同一画布上绘制不同模块时,记得使用 beiginPath()和closePath()框选起来,在里面使用stroke.style可以画不同颜色的东西
<script >
window.onload=function(){
var myCarvas=document.getElementById('my-carvas')//mycarvas画布的id
var ctx=myCarvas.getContext('2d');
//绘制矩形
ctx.beginPath();
ctx.fillStyle='#ff0000';//填充颜色
ctx.fillRect(5,5,100,100);//填充矩形 X Y width height
ctx.strokeStyle='blue';//边框颜色
ctx.lineWidth='5';//边框宽度
ctx.strokeRect(5,5,100,100)//边框起点X,Y width height
ctx.closePath();
//基础线条
ctx.beginPath();
ctx.lineTo(150,150)
ctx.lineTo(250,150)
ctx.lineTo(200,250)
ctx.strokeStyle='darkgreen';
ctx.closePath();
ctx.stroke();
}
</script>
效果如下,(背景颜色是另外的样式)
热心网友
时间:2022-04-20 01:23
var canvasDom = $("myCanvas");
var myDraw1 = new Draw(canvasDom);
$("button_line").onclick = function(){
canvasDom.onmousemove = function(e){
myDraw1.drawLine(e);
}
}
$("button_line_width").onclick = function(){
myDraw1.setLineWidth($("text_line_width").value);
}
$("button_choose_color").onclick = function(){
myDraw1.chooseColor($("text_choose_color").value);
}
function Draw(canvasDom){
var mouseX,mouseY,mx,my;
var pd = false;
var coordinate = function(e){
mouseX = e.pageX-canvasDom.offsetLeft;
mouseY = e.pageY-canvasDom.offsetTop;
}
canvasDom.onmousedown = function(e){
coordinate(e);
pd = true;
mx = mouseX;
my = mouseY;
ctx.save();
}
canvasDom.onmousemove = function(e){
drawLine(e);
}
canvasDom.onmouseup = function(e){
pd = false;
}
this.drawLine = function(e){
coordinate(e);
if(pd == true){
ctx.save();
ctx.beginPath();
ctx.moveTo(mx,my);
ctx.lineTo(mouseX,mouseY);
ctx.closePath();
ctx.stroke();
mx=mouseX;
my=mouseY;
}
}
this.setLineWidth = function(lw){ctx.lineWidth = lw;}
this.chooseColor = function(c){ctx.strokeStyle = c;}
<!--html-->
<canvas id="myCanvas" width="400" height="400" style="border:solid 1px #000;"></canvas><br>
<input type="button" value="画线" id="button_line">
<input type="text" id="text_line_width" for="button_line_width"><input id="button_line_width" type="button" value="设置线宽"><br>
<input type="text" id="text_choose_color"><input type="button" value="改变颜色" id="button_choose_color"><br>
}
热心网友
时间:2022-04-20 02:58
用beginpath()和closepath()分离一下,同一个画布可以写多组这个,颜色也可以选
热心网友
时间:2022-04-20 04:49
我也遇到了这个问题,汗,不知道怎么办呢。
确切的说,用canvas.stroke()之后,改变了strokeStyle,再用canvas.stroke(),会把新的颜色叠加到原来的颜色上,真奇怪。
HTML5 canvas lineTO()方法如何在同一个画布画不同粗细的,颜色的线条...
是这样的,建议在同一画布上绘制不同模块时,记得使用 beiginPath()和closePath()框选起来,在里面使用stroke.style可以画不同颜色的东西 <script > window.onload=function(){ var myCarvas=document.getElementById('my-carvas')//mycarvas画布的id var ctx=myCarvas.getContext('2d');//绘制矩...
js<canvas>标签绘制不同粗细的线条
请在绘制每条线条前,用beginPath()重置路径,这样每条线条的样式就可以单独设置了:var cv = document.getElementById('canvas');var g = cv.getContext('2d');//绘制线条1g.beginPath(); //看这行g.lineWidth=5;g.moveTo(x1,y1);g.lineTo(x2,y2);g.stroke();//绘制线条2g.beginPath...
如何在 HTML5 画布上绘图
在指定所需的外观之后,可以使用 fill 方法应用颜色,并使用 stroke 方法执行线条和形状的呈现。 应用一些基本风格。这里,通过使用 fillStyle 属性绘制一个黑色矩形,将画布背景设置为黑色 (#000)。然后使用 strokeStyle 属性将线条颜色设置为白色 (#fff),使用 fillRect 方法应用黑色背景,并使用 lineWidth 属性将线条的粗...
在HTML5的CANVAS上绘制椭圆的几种方法
参数方程法该方法利用椭圆的参数方程来绘制椭圆//---用参数方程绘制椭圆---//函数的参数x,y为椭圆中心;a,b分别为椭圆横半轴、//纵半轴长度,不可同时为0//该方法的缺点是,当linWidth较宽,椭圆较扁时//椭圆内部长轴端较为尖锐,不平滑,效率较低function ParamEllipse(context, x, y, a, ...
如何在HTML中画一条线
需要准备的材料分别有:电脑、chrome浏览器、html编辑器。1、首先打开html编辑器,新建一个html文件,例如:index.html。2、其次,在index.html的<body>标签中,添加代码:<hr/>。3、浏览器运行index.html页面,此时成功在html中画了一条线。
如何用Canvas绘制多种图形
Canvas 中的基本图形 通过上文定义的 ctx 变量可以干许多有意思的事情,我们先看看如何绘制一些基本图形。线条 我们指定画笔移动到某一点,然后告诉画笔需要从当前这一点画到另一点。我们可以让画笔多次移动、绘制,最后统一输出到屏幕上。例子如下:ctx.moveTo(10, 10);ctx.lineTo(150, 50);ctx.line...
HTML5用canvas怎么实现动画效果
HTML5用canvas实现动画效果举例:1、定义动画按钮 <div id="controls"> <input id="animateButton" type="button" value="动画开始"> </div> 2、定义页面的canvas布局 <canvas id="canvas" width="750" height="500"> </canvas> 3、通过js脚本来控制动画:var canvas = document.getElement...
html5的canvas画线问题
我已经做过canvas方面的开发了,对html5这个新的api很了解,首先你不要在style里面设width跟height,可以告诉你最后跟你设的坐标不一样,这里面原因是canvas的原始设置是有固定高跟宽的,所以你光设置style的css值,会产生很多问题,你就不要在css里面设,直接这样<canvas width="" height=""> 然后你...
如何使用HTML5 Canvas动态的绘制拓扑图
1.添加引用\r\n右击项目-添加引用-浏览 找到本地的dll文件\r\n2.using 该dll文件里面代码的名称空间 \r\n然后就可以调用dll文件里面的类和方法 <canvas>定义和用法:Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。你可以直接在...
如何使用HTML5中canvas绘制一个立体金字塔图形?(javascript可以)
<canvas id="myCanvas" width="400" height="500" solid #c3c3c3;"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.strokeStyle="black";cxt.beginPath();cxt.moveTo(200,0);cxt.lineTo(0,400);cxt.lineTo(...