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

JavaScript017

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外嵌边框,颜色较浅),