[ html 绘图 lineJoin lineCap ] canvas绘图属性lineJoin 设置线的连接点和lineCap 设置线的端点样式之间区别实例演示

<!DOCTYPE html>
<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta name=‘description‘ content=‘this is my page‘>
<meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
<style type=‘text/css‘>
html,body,canvas {
    margin: 0;
    padding: 0;
}

html {
    background: #999;
}

canvas {
    background: #FFF;
    display: block;
    margin: 75px auto;
    border-radius: 2px;
}
</style>
<script type="text/javascript">
    $( function(){
        var oCan = $( ‘#can‘ ).get( 0 ).getContext( ‘2d‘ );
        oCan.beginPath();
        oCan.strokeStyle = ‘#F0F‘;
        oCan.lineWidth = 10;
        oCan.moveTo( 250 , 175 );
        oCan.lineTo( 445 , 345 );
        oCan.lineTo( 45 , 135 );
        oCan.closePath();
        oCan.lineJoin = ‘round‘; /* 设置线之间的连接点的形状 miter (默认) round (圆形) bevel (斜角) 但是无法作用于自动闭合的点*/
        oCan.stroke();

        oCan.beginPath();
        oCan.strokeStyle = ‘#F0F‘;
        oCan.lineWidth = 10;
        oCan.moveTo( 50 , 75 );
        oCan.lineTo( 125 , 95 );
        oCan.lineTo( 45 , 35 );
        oCan.lineCap = ‘round‘; /* 设置端点的样式  butt (默认) round (圆形) square (高度多出线宽的一半) 作用于 " 线 " 并且要在此属性之后才能调用 closePath() 有效 */
        oCan.stroke();
        oCan.closePath();
    } );
</script>
</head>
<body>
    <canvas width=‘500‘ height=‘350‘ id=‘can‘>请您更换浏览器...</canvas>
</body>
</html>
时间: 2024-10-09 02:53:52

[ html 绘图 lineJoin lineCap ] canvas绘图属性lineJoin 设置线的连接点和lineCap 设置线的端点样式之间区别实例演示的相关文章

[ html 绘图 translate roteta ] canvas绘图属性translate 设置画布中心点 rotate 旋转属性实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

HTML5 Canvas 绘图入门

HTML5 Canvas 绘图入门 HTML5 Canvas 绘图入门,仅供学习参考 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h5 { text-align: center; } canvas {

Delphi 绘图[2] 无Canvas属性,获取 Canvas 对象

Delphi 绘图[2]  无Canvas属性,获取 Canvas 对象 //例如 Panel1 无TCanvas 属性,获取TCanvas var Cvs: TCanvas; begin Cvs:= TCanvas.Create; Cvs.Handle := GetDC(Panel1.Handle); Cvs.Brush.Color := clBlue; Cvs.FillRect(Panel1.ClientRect); Cvs.Free; end; 创建时间:2020.02.01 更新时间:

[ html canvas 绘制文本 ] canvas绘图实现绘制文本 strokeText fillText方法及textAlign textBaseline font 属性实例演示

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

HTML5 canvas绘图基本使用方法

<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图. <canvas></canvas>只是一个绘制图形的容器,除了id.class.style等属性外,还有height和width属性.在<canvas>>元素上绘图主要有三步: 获取<

H5 Canvas 绘图

一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas定义一个区域,可以由html属性定义该区域的宽高,JavaScript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图. 二.Canvas能做什么 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位.HTML5在基于Web的图像显示方面比Flash更加立体.更加精巧. 图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表.现在一些开发者使用HTM

Canvas 绘图使用语法

1.canvas标签 <canvas  width=""  height=""  id=""> 您的浏览器不支持canvas,请更换浏览器! *注:canvas的宽高度最好设置成行内样式,不然会等比变化 例如:在嵌入样式中设置canvas 宽高为:500px X 500px 在canvas中画100px * 100px 的矩形,矩形宽高会等比变化 500/300 : 500/150 = x/100 : y/100; </canv

Canvas绘图基础(一)

简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) strokeRect(double x, double y, double w, double h) fillRect(double x, double y, double w, double h) 看一下这三个方法的使用 <!DOCTYPE html> <html lang="z

Canvas绘图方法和图像处理方法(转)

转自:http://javascript.ruanyifeng.com/htmlapi/canvas.html 概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. <canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas!