js<canvas>标签绘制不同粗细的线条

JavaScript027

js<canvas>标签绘制不同粗细的线条,第1张

请在绘制每条线条前，用beginPath()重置路径，这样每条线条的样式就可以单独设置了：

var cv = document.getElementById('canvas')

var g = cv.getContext('2d')

//绘制线条1

g.beginPath() //看这行

g.lineWidth=5

g.moveTo(x1,y1)

g.lineTo(x2,y2)

g.stroke()

//绘制线条2

g.beginPath()  //还有这行

g.lineWidth=10

g.moveTo(x3,y3)

g.lineTo(x4,y5)

g.stroke()

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow")

})

要看你设置的是什么 一般是 $(选择器).css("border","宽度 颜色 线类型")

线类型：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅），