H5 canvas绘制直线不显示，求大神帮忙！！！

bigHead_Lin 2017-03-03 09:20:35

代码1如下：（不显示）
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.min.js"></script>

</head>

<body onload="draw('canvas')">
<canvas id="canvas" style="width: 500px;height: 350px;background-color:#fff;"></canvas>
<script>
var x, y, x1, y1;
$(function() {
draw("canvas");
})

function draw(id) {
var cvs = document.getElementById(id);
var ctx = cvs.getContext('2d'); // 画笔

ctx.fillStyle = "rgba(255,0,0,3)";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(170, 438);
ctx.lineTo(333, 438);
ctx.closePath();
ctx.fill();
ctx.stroke();

}
</script>

</body>

</html>

代码2如下：（显示）
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.min.js"></script>

</head>

<body onload="draw('canvas')">
<canvas id="canvas" style="width: 500px;height: 350px;background-color:#fff;"></canvas>
<script>
var x, y, x1, y1;
$(function() {
draw("canvas");
})

function draw(id) {
var cvs = document.getElementById(id);
var ctx = cvs.getContext('2d'); // 画笔

ctx.fillStyle = "rgba(255,0,0,3)";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(10,100);
ctx.lineTo(10,100);
ctx.closePath();
ctx.fill();
ctx.stroke();

}
</script>

</body>

</html>

...全文

1133 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

xutao_1111 2019-08-30

打赏
举报

多谢，我也是这个问题，解决了

圭宁的小小前端 2017-03-06

打赏
举报

原因是1# 的你用css设置width 和 height 相当于将默认的画布拉伸了改变不了画布大小

业余草 2017-03-06

打赏
举报

业余草 CODE大全

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>canvas line</title>
<script>
window.onload = function(){
  var mycanvas = document.getElementByIdx_x("mycanvas");
  var context = mycanvas.getContext("2d");
  
  context.strokeStyle='#000';
  context.lineWidth=10;
  context.lineCap='square';
  context.beginPath();
  context.moveTo(20,0);
  context.lineTo(100,0);
  context.stroke();
  context.closePath();
 }
</script>
</head>
<body>
<canvas id="mycanvas" width="600" height="400"></canvas>
</body>
</html>

1)每个Canvas上下文仅有一个当前Path; 2)通过beginPath方法开始一个Path,closePath来结束一个Path; 3)Path有两个基本的方法：moveTo(),lineTo(); 4)lineCap有三个属性: butt(默认)边缘是平的,与当前线条垂直 round:边缘是半圆,该半圆的直径是当前线条的长度; square:边缘是长方形,该长方形的长是当前线条的宽度,宽是当前线条宽度的一半; 5)lineWidth属性用来设置线条的宽度; 6)strokeStyle 属性定义当前线条的颜色及样式

天际的海浪 2017-03-04

打赏
举报

设置<canvas>尺寸（像素数量）要用对象直接的width，height属性，不要用css的。 <canvas id="canvas" width="500" height="350" style="background-color:#fff;"></canvas> 用css样式设置的只是画布的显示大小，不会改变画布中的像素数量。默认的像素数量是 300*150 你在400多像素的位置画线就超出300*150的范围了。

bigHead_Lin 2017-03-04

打赏
举报

引用 1 楼天际的海浪的回复:

设置<canvas>尺寸（像素数量）要用对象直接的width，height属性，不要用css的。 <canvas id="canvas" width="500" height="350" style="background-color:#fff;"></canvas> 用css样式设置的只是画布的显示大小，不会改变画布中的像素数量。默认的像素数量是 300*150 你在400多像素的位置画线就超出300*150的范围了。

原来如此我试试。