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 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
xutao_1111 2019-08-30
  • 打赏
  • 举报
回复
多谢,我也是这个问题,解决了
  • 打赏
  • 举报
回复
原因是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的范围了。
原来如此我试试。
mirrorspace 2017-03-04
  • 打赏
  • 举报
回复
画布的宽高不能搞像素那种 要像table那种 width=300 height=150

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧