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>

今天给大家分享一下，修真院官网JS任务11，深度思考中的知识点——如何使用canvas？(初阶)

矩形

实心：

// 填充色 (默认为黑色) 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.背景介绍

圆形

实心：

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();

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。

线段

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’;

或者直接从 dom 中取：

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

2.知识剖析

文字

文字)
的位置设定相对复杂，不像矩形、图像一样有个固定的左上角坐标，也不像圆一样有固定的圆心。文字的位置设置也是一个类似
(x, y) 形式的坐标，这个位置可以是文字的 4 个角，或者中心。

x 部分，蓝线（水平坐标）为 x
坐标所在位置（textAlign
属性）：

ctx.font = “bold 80px serif” ctx.textAlign = “start”; // 默认值为 start
ctx.fillStyle = ‘darkSlateBlue’; // 文本内容、坐标 ctx.fillText(‘hello
world’, 0, 0);

y 部分，蓝线（垂直坐标）为 y 坐标所在位置
（textBaseline
属性）：

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 收藏
  评论

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”;