新闻资讯

当前位置:新萄京娱乐场手机版 > 新闻资讯 > 0) // 矩形左上角坐标 (0,直接使用JavaScript完成绘

0) // 矩形左上角坐标 (0,直接使用JavaScript完成绘

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-05 16:46

canvas api

2016/01/11 · HTML5 · Canvas

初稿出处: 韩子迟   

大家好,小编是IT修真院达卡分院第6期的学生先小波,一枚正直纯洁善良的WEB前端技士。

着力骨骼


 

<canvas id="canvas" width=1000 height=1000 style="border: 1px black dotted"></canvas> <script> var ctx = document.getElementById('canvas').getContext('2d'); </script>

1
2
3
4
5
<canvas id="canvas" width=1000 height=1000 style="border: 1px black dotted"></canvas>
 
<script>
  var ctx = document.getElementById('canvas').getContext('2d');
</script>

今天给大家大快朵颐一下,修真院官方网址JS职责11,深度思量中的知识点——怎么样采纳canvas?(早先)

矩形


实心:

// 填充色 (默认为蛋青) ctx.fillStyle = 'darkSlateBlue'; // 规定画布左上角坐标为 (0, 0) // 矩形左上角坐标 (0, 0) // 矩形大小 100*100 ctx.fillRect(0, 0, 100, 100);

1
2
3
4
5
6
7
// 填充色 (默认为黑色)
ctx.fillStyle = 'darkSlateBlue';
 
// 规定画布左上角坐标为 (0, 0)
// 矩形左上角坐标 (0, 0)
// 矩形大小 100*100
ctx.fillRect(0, 0, 100, 100);

空心:

// 边框颜色 (暗中认可粉红) ctx.strokeStyle = 'darkSlateBlue'; // 规定画布左上角坐标为 (0, 0) // 矩形左上角坐标 (0, 0) // 矩形大小 100*100 ctx.strokeRect(0, 0, 100, 100);

1
2
3
4
5
6
7
// 边框颜色 (默认黑色)
ctx.strokeStyle = 'darkSlateBlue';
 
// 规定画布左上角坐标为 (0, 0)
// 矩形左上角坐标 (0, 0)
// 矩形大小 100*100
ctx.strokeRect(0, 0, 100, 100);

1.背景介绍

圆形


实心:

ctx.fillStyle = 'darkSlateBlue'; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill();

1
2
3
4
5
6
ctx.fillStyle = 'darkSlateBlue';
 
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

空心:

ctx.strokeStyle = 'darkSlateBlue'; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.stroke();

1
2
3
4
5
6
ctx.strokeStyle = 'darkSlateBlue';
 
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.stroke();

Canvas是HTML5新扩充的零件,它仿佛一块幕布,能够用JavaScript在上边绘制各个图片、动画等。

线段


ctx.strokeStyle = 'darkSlateBlue'; ctx.beginPath(); ctx.moveTo(100, 100); // 起点 ctx.lineTo(200, 200); ctx.lineTo(300, 100); // ctx.closePath(); ctx.stroke();

1
2
3
4
5
6
7
8
ctx.strokeStyle = 'darkSlateBlue';
 
ctx.beginPath();
ctx.moveTo(100, 100); // 起点
ctx.lineTo(200, 200);
ctx.lineTo(300, 100);
// ctx.closePath();
ctx.stroke();

不曾Canvas的年份,绘图只好借助Flash插件实现,页面不得不用JavaScript和Flash进行相互。有了Canvas,大家就再也不要求Flash了,直接利用JavaScript达成绘制。

图像


动态生成 img:

var img = new Image(); // 必定要等图片载入后(或然曾在缓存中了)技艺用 drawImage 方法 img.onload = function() { // 左上角坐标 & 图像大小 ctx.drawImage(img, 0, 0, 100, 56); }; img.src = '0.jpg';

1
2
3
4
5
6
7
8
9
var img = new Image();
 
// 一定要等图片载入后(或者已经在缓存中了)才能用 drawImage 方法
img.onload = function() {
  // 左上角坐标 & 图像大小
  ctx.drawImage(img, 0, 0, 100, 56);
};
 
img.src = '0.jpg';

依旧直接从 dom 中取:

var img = document.getElementById('myImg'); ctx.drawImage(img, 0, 0, 100, 56);

1
2
var img = document.getElementById('myImg');
ctx.drawImage(img, 0, 0, 100, 56);

2.文化分析

文字


文字) 的地点设定相对复杂,不像矩形、图像一样有个定点的左上角坐标,也不像圆同样有稳固的圆心。文字的职分设置也是二个类似 (x, y) 格局的坐标,这些地方能够是文字的 4 个角,或许中央。

x 部分,蓝线(水平坐标)为 x 坐标所在位置(textAlign 属性):

图片 1

ctx.font = "bold 80px serif" ctx.textAlign = "start"; // 暗许值为 start ctx.fillStyle = 'darkSlateBlue'; // 文本内容、坐标 ctx.fillText('hello world', 0, 0);

1
2
3
4
5
6
ctx.font = "bold 80px serif"
ctx.textAlign = "start";  // 默认值为 start
 
ctx.fillStyle = 'darkSlateBlue';
// 文本内容、坐标
ctx.fillText('hello world', 0, 0);

y 部分,蓝线(垂直坐标)为 y 坐标所在地点(textBaseline 属性):

图片 2

ctx.font = "bold 80px serif" ctx.textAlign = "start"; // 暗中认可值为 start ctx.textBaseline = "hanging"; // 暗中认可值为 阿尔法betic ctx.fillStyle = 'darkSlateBlue'; // 文本内容、坐标 ctx.fillText('hello world', 0, 0);

1
2
3
4
5
6
7
ctx.font = "bold 80px serif"
ctx.textAlign = "start";  // 默认值为 start
ctx.textBaseline = "hanging"; // 默认值为 alphabetic
 
ctx.fillStyle = 'darkSlateBlue';
// 文本内容、坐标
ctx.fillText('hello world', 0, 0);

于是文字的职分共有 5*6=30 种。

fillText 方法不援救文件断行,即怀有文件出现在一行内。所以,假若要生成多行文本,唯有调用多次fillText 方法。

中空的话用 stroke 就可以。

2.1 canvas的包容性

其他 API


属性:

  • lineWidth:stroke 的线条宽度 ctx.lineWidth = 2

方法:

  • clearRect: 清除某某个(矩形区域)画布 ctx.clearRect(0, 0, 100, 100)
  • measureText: 计算文本对象的大幅度
  • translate
  • rotate

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。

Read More


  • Canvas API (w3cschool)
  • HTML5 Canvas — the Basics (Opera)
  • Canvas API (ruanyifeng)
  • Canvas tutorial (MDN)

    1 赞 3 收藏 评论

图片 3

2.2 canvas的局地主导品质

第一得说下width和height属性了,那是在canvas中必备的性质。

width:画布的可观。和一幅图像同样,那些天性可以钦定为二个卡尺头像素值或许是窗口中度的百分比。当这些值退换的时候,在该画布上业已完成的别的绘图都会擦除掉。;默许值是 300。

height:画布的小幅度。和一幅图像一样,这一个特性能够钦定为三个整数像素值恐怕是窗口宽度的比重。当以此值改换的时候,在该画布上业已变成的其它绘图都会擦除掉。暗中同意值是 width的一半。

123

怎样利用dom绘出一些大概的图

在此处就必要选取一些品质:

fillStyle:设置或重回用于填充美术的颜料、渐变或情势。比方说绘制贰个渐变色的矩形

fillRect(x,y,width,height):从坐标(x,y)处绘制一个长短为width,宽度为height的填充矩形

demo1 制作渐变矩形

var a=document.getElementById("myCanvas");

var demo1=a.getContext("2d");

var my_gradient=demo1.createLinearGradient(0,0,0,170);

my_gradient.addColorStop(0,"red");

my_gradient.addColorStop(1,"blue");

demo1.fillStyle=my_gradient;

demo1.fillRect(20,20,150,100);

strokeStyle:设置或回到用于笔触的水彩、渐变或情势。

strokeRect(x,y,width,height):从坐标(x,y)处绘制四个长度为width,宽度为height的矩形边框

line-width:表示边框宽度

canvas里面还足以增多一些文本属性,比如说font,textAlign,textBaseline等等

demo2制作渐变矩形框

var b=document.getElementById("myCanvas");

var demo2=b.getContext("2d");

var gradient=demo2.createLinearGradient(0,0,170,0);

gradient.addColorStop("0","#FFF");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// 用渐变实行填空

demo2.strokeStyle=gradient;

demo2.lineWidth=10;//边框宽度

demo2.strokeRect(20,20,150,100);

demo3 使用font, textAlign属性

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// 在地点 150 创立蓝线

ctx.strokeStyle="blue";

ctx.moveTo(150,20);

ctx.lineTo(150,170);

ctx.stroke();

ctx.font="15px Arial";

// 展现不同的 textAlign 值

ctx.textAlign="start";

ctx.fillText("textAlign=start",150,60);

ctx.font="40px Arial";

ctx.textAlign="end";

ctx.fillText("textAlign=end",150,80);

ctx.textAlign="left";

ctx.fillText("textAlign=left",150,100);

ctx.textAlign="center";

ctx.fillText("textAlign=center",150,120);

ctx.textAlign="right";

ctx.fillText("textAlign=right",150,140);

2.3 canvas中的一些常用方法

1).lineTo():增加一个新点,然后在画布中开创从该点到最终钦定点的线条

2).moveTo():把路子移动到画布中的钦赐点,不创制线条

3).stroke():绘制已定义的路子

demo4 canvas突显路线;

var canvas = document.getElementById('myCanvas'); //获取上下文对象,canvas非常多常用方法都以基于这么些目的达成的

var context = canvas.getContext("2d"); //近些日子参数独有2d

context.lineWidth = 5;  //线条宽度

context.moveTo(10,10);  //光标移到那点

context.lineTo(10,50);  //下一点坐标

context.lineTo(100,50);  //下一点坐标

context.stroke();        //绘制路线

4).beginPath():起头一条门路,或复位当前路径

5).arc():创建弧/圆线

6).closePath():创造从当前点回到起初点的门径

demo5.绘制三角形

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20,20);

ctx.lineTo(20,100);

ctx.lineTo(70,100);

ctx.closePath();

ctx.stroke();

3.大面积难题

图像能或无法放手canvas上?

4.消除方案

可通过行使drawImage(image,x,y)就足以将图像放到canvas上,然后在canvas内安装宽高,就足以将图像放到画布中。

demo6.利用canvas渲染图片

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

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

img.onload = function() {

ctx.drawImage(img,0,0);

}

5.编码实战

6.恢弘思虑

在上个demo中窥见只要设置canvas标签css的width,height与在canvas中装置width,height不雷同,那是干吗?

高度和幅度是用于绘图的逻辑帆布尺寸和是见仁见智的偏离style.height和style.widthCSS属性。如若不安装CSS属性,画布的本征大小将被当作展现大小; 假诺设置CSS属性,而且它们与画布尺寸区别,则您的剧情就要浏览器中缩放。

7.仿照效法文献

参考一:https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5canvas中width,height与style width,style height的区别

参考二:http://www.runoob.com/html/html5-canvas.htmlHTML5 Canvas | 新手教程

参考三:http://www.w3school.com.cn/html5/html5_canvas.aspW3C HTML5标签Canvas

8.更加多研究

1.canvas可知使图像产生放大减弱效果啊?

2.canvas成分内部的width和height属质量使用rem单位吗?

本文由新萄京娱乐场手机版发布于新闻资讯,转载请注明出处:0) // 矩形左上角坐标 (0,直接使用JavaScript完成绘

关键词: