canvas线条的属性

时间:2022-09-20 08:43:59

一、线条的帽子lineCap

取值:butt(默认值),round圆头,square方头

var canvas=document.getElementById("canvas");

canvas.width=800;
canvas.height=800; var context=canvas.getContext("2d"); context.lineWidth=40;
context.strokeStyle="#005588"; //三个beginpath()画了3条平行线
context.beginPath();
context.moveTo(100,200);
context.lineTo(700,200);
context.lineCap="butt";
context.stroke(); context.beginPath();
context.moveTo(100,400);
context.lineTo(700,400);
context.lineCap="round";
context.stroke(); context.beginPath();
context.moveTo(100,600);
context.lineTo(700,600);
context.lineCap="square";
context.stroke(); //baseline
context.lineWidth=1;
context.strokeStyle="#27a";
context.moveTo(100,100);
context.lineTo(100,700);
context.moveTo(700,100);
context.lineTo(700,700);
context.stroke();

canvas线条的属性

round做动画的时候需要圆角可以直接画,lineCap的效果只能用于线段的开始处和结尾处,不能用于连接处。

canvas线条的属性

lineCap="square"可以用来在线段闭合时候完全闭合,但是还是推荐使用clothPath()闭合。

var canvas=document.getElementById("canvas");

canvas.width=800;
canvas.height=800; var context=canvas.getContext("2d"); context.beginPath();
context.moveTo(100, 350);
context.lineTo(500,350);
context.lineTo(500,200);
context.lineTo(700,400);
context.lineTo(500,600);
context.lineTo(500,450);
context.lineTo(100,450);
context.lineTo(100,350);
// context.closePath(); //推荐 context.lineWidth=10;
context.lineCap="square"; //不推荐
context.fillStyle="yellow";
context.strokeStyle="#058" context.fill();
context.stroke();

二、画一个五角星,说明线条其它状态属性

canvas线条的属性

圆上的五个角平分360°,每个角72°,90°-72°=18°

小圆上的角平分72°,18°+36°=54°

角度转弧度——弧度=角度*π/180 即(18+i*72)*Math.PI/180

var canvas=document.getElementById("canvas");

canvas.width=800;
canvas.height=800; var context=canvas.getContext("2d");
context.beginPath();
//角度转弧度:除以180*PI
for(var i=0;i<5;i++){
context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400,
-Math.sin((18+i*72)/180*Math.PI)*300+400);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400,
-Math.sin((54+i*72)/180*Math.PI)*150+400);
} context.closePath(); context.lineWidth=10;
context.stroke();

canvas线条的属性

封装成函数:

window.onload=function(){
var canvas=document.getElementById("canvas"); canvas.width=800;
canvas.height=800; var context=canvas.getContext("2d");
context.lineWidth=10;
drawStar(context,150,300,400,400)
} function drawStar(ctx,r,R,x,y,){
ctx.beginPath();
//角度转弧度:除以180*PI
for(var i=0;i<5;i++){
ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+x,
-Math.sin((18+i*72)/180*Math.PI)*R+y);
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,
-Math.sin((54+i*72)/180*Math.PI)*r+y);
} ctx.closePath();
ctx.stroke();
}

分别修改小r=80,200,400得到下面图形

canvas线条的属性canvas线条的属性canvas线条的属性

增加一个顺时针旋转的参数:rot

window.onload=function(){
var canvas=document.getElementById("canvas"); canvas.width=800;
canvas.height=800; var context=canvas.getContext("2d");
context.lineWidth=10;
drawStar(context,150,300,400,400,30);
} //rot顺时针旋转的角度
function drawStar(ctx,r,R,x,y,rot){
ctx.beginPath();
//角度转弧度:除以180*PI
for(var i=0;i<5;i++){
ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
} ctx.closePath();
ctx.stroke();
}

旋转30度的效果如下:

canvas线条的属性

三、线条的连接lineJoin和miterLimit

1、lineJoin取值

miter(default)永远呈现一个尖角,bevel斜接,round圆角

bevel像彩带折下来的效果。

canvas线条的属性canvas线条的属性canvas线条的属性

2、miter相关miterLimit的属性

设置小r为30,lineJoin为miter,效果如下:角没有延伸成尖角,而是采取bevel的方式来显示。

context.lineJoin="miter";
drawStar(context,30,300,400,400,30);

canvas线条的属性

为什么?

因为context.miterLimit=10默认值是10,

miterlimit只有当lineJoin为miter时才会有效。

miterLimit指的是,当使用miter作为线条和线条相接的方式时,所产生的内角和外角的距离的最大值

默认值是10就代表最大值是10px,一旦超过来10px就会使用bevel的方式显示。

上面把内圆半径r设置为30时,形成的尖角非常尖,内角和外角的距离超过来miterLimit的10,

现在把miterlimit改大点,改成20,效果如下:

 context.lineJoin="miter";
context.miterLimit=20;
drawStar(context,30,300,400,400,30);

canvas线条的属性

注意:miterLimit并不是从白色尖尖到黑色尖尖的距离,这个距离远远大于20px。

canvas线条的属性

当产生miterLimit时一定是线条有宽度的,有宽度的线条中间的线的尖角与外边尖角直接的距离。

canvas给出一个miterLimit的经验值10。只有在极其特别的情况下,需要表现非常尖锐的角的时候才需要修改miterLimit。

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/8620101.html   有问题欢迎与我讨论,共同进步。

canvas线条的属性的更多相关文章

  1. canvas线条实践之运动的正方形

    原理说明: 1.通过rect实现正方形的绘制: 2.save保存canvas面板的保存,restore回复保存的canvas面板到初始状态: 3.translate用于改变canvas坐标的起始位置: ...

  2. canvas的globalCompositeOperation属性

    在开发过程中遇到过类似刮刮卡的效果,就是涂抹时变透明,显示出下方的内容,做法思路简单说一下问题和解决方案: 分为2层,最下面一层是内容,比如'一等奖',上面一层用一个canvas遮挡住,画布本来是透明 ...

  3. canvas 线条不清楚的问题

    对于canvas 画出的1px线条不清楚的问题, 一般是坐标点+0.5像素的问题, 但是有时要考虑viewpoint的问题,让canvas的width = 980,同时viewpoint = 980 ...

  4. canvas 的HTML属性

    (一) width/height 默认值与单位 Canvas  标签只有两个属性—— width\height,作为一种替换元素,它默认大小为300×150像素. canvas的单位只能是是px,值只 ...

  5. 在html5 canvas的destination-atop属性的一些奇怪的问题

    最近在整理canvas的时候发现HTML5 Canvas开发详解一个奇怪的属性解释 目标图形是显示在画布上的位图 而原图形是指要回执在画布上的形状 w3school上面是这样说的 destinatio ...

  6. canvas线条笔帽及连接

    1) 线条笔帽篇: 1 function draw (id) { 2 var canvas = document.getElementById(id); 3 context = canvas.getC ...

  7. 基于canvas线条绘制图形

    原理说明 绘制一个正方形,正放心每条边等比例均分,具体分配多少根据自身情况而定,按照最上边边顺时针方向依次绘制线条,相邻两条边上的点依次连接,知道所有的点全部连接完便绘制完成. 示例效果图图如下 具体 ...

  8. &lbrack; javascript canvas toDataURL&lpar;&rpar; clip&lpar;&rpar; &rsqb; javascript canvas toDataURL&lpar;&rpar; clip&lpar;&rpar; 属性及方法演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  9. 【HTML5】Canvas之globalCompositeOperation属性详解

    globalCompositeOperation即Canvas中的合成操作. 1.source-over 这是默认值,他表示绘制的图形将画在现有画布之上 <!DOCTYPE html> & ...

随机推荐

  1. 微软准备开源PowerShell

    微软有计划在近期内开源PowerShell 近日微软再次在向开源投出橄榄枝, PowerShell是面向Windows和Windows Server的自动化平台和脚本语言,帮助用户简化系统的管理.在纳 ...

  2. main&lpar;&rpar;函数的完整形式

    初学C语言都觉得main作为整个程序的入口函数是不需要传递参数的,但事实上,我们完全可以给main()传入参数进而控制整个程序的执行,就像我们使用DOS命令传入的参数一样,这里面argc表示传入的参数 ...

  3. 《CSS3实战》读书笔记 第2章 层叠样式表(CSS)

    ## 层叠样式表 本章将阐述CSS的基本规则. ### 解构CSS 所谓CSS,由选择器(selector)和声明块(declaration block)组成.再进一步细分,每个声明包括了属性和值. ...

  4. Java获取各种常用时间方法大全

    Java获取各种常用时间方法大全 package cc.javaweb.test; Java中文网,Java获取各种时间大全 import java.text.DateFormat; import j ...

  5. Linux中的svn客户端RabbitVCS-2

    我们都知道,自从svn出道以来,很多人都预言,cvs将会被其取代.就如同他们预言maven要取代ant一样.可见,svn的流行.在Windows中,最常用到的开源免费的svn客户端就是Tortoise ...

  6. linux 发邮件

      一. centos yum 安装 1. yum install mailx vim  /etc/nail.rc 添加网易163邮箱开放的需要认证的smtp服务器: set from=USER@16 ...

  7. &lbrack;bzoj1059&rsqb; &lbrack;ZJOI2007&rsqb; 矩阵游戏 &lpar;二分图匹配&rpar;

    小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏--矩阵游戏.矩阵游戏在一个N *N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作:行交换操作:选 ...

  8. &lbrack;Jenkins&rsqb;&lbrack;git&rsqb;构建时提示Caused by&colon; hudson&period;plugins&period;git&period;GitException&colon; Command &quot&semi;&sol;usr&sol;bin&sol;git reset --hard&quot&semi; returned status code 128&colon;

    --------------------- 如需转载,转载请注明出处. --------------------- 今日发现所有IOS构建相关的job全部失败,并提示如下错误: ERROR: Erro ...

  9. Executor介绍

    1.Executor介绍: Executor是mybatis的核心接口之一,其中定义了数据库操作的基本方法,它的子类结构图如下:这这张关系图中,涉及到了模板方法模式和装饰器模式.BaseExecuto ...

  10. Spark思维导图之Spark Core