HTML canvas fillStyle 属性

更新日期: 2020-10-02阅读: 1.7k标签: canvas

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。


浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillStyle 属性。

注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

默认值:#000000
JavaScript 语法context.fillStyle=color|gradient|pattern;

属性值

描述
color指示绘图填充色的 css 颜色值。默认值是 #000000。
gradient用于填充绘图的渐变对象(线性 或 放射性)。 
pattern用于填充绘图的 pattern 对象。 

实例

例1:定义用红色填充的矩形:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <title>xinbiancheng.cn</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.querySelector("#myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

颜色、样式和阴影

属性描述
fillStyle
设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle
设置或返回用于笔触的颜色、渐变或模式。
shadowColor
设置或返回用于阴影的颜色。
shadowBlur
设置或返回用于阴影的模糊级别。
shadowOffsetX
设置或返回阴影与形状的水平距离。
shadowOffsetY
设置或返回阴影与形状的垂直距离。

方法描述
createLinearGradient()
创建线性渐变(用在画布内容上)。
createPattern()
在指定的方向上重复指定的元素。
createRadialGradient()
创建放射状/环形的渐变(用在画布内容上)。
addColorStop()
规定渐变对象中的颜色和停止位置。

线条样式

属性描述
lineCap
设置或返回线条的结束端点样式。
lineJoin
设置或返回两条线相交时,所创建的拐角类型。
lineWidth
设置或返回当前的线条宽度。
miterLimit
设置或返回最大斜接长度。

矩形

方法描述
rect()
创建矩形。
fillRect()
绘制"被填充"的矩形。
strokeRect()
绘制矩形(无填充)。
clearRect()
在给定的矩形内清除指定的像素。

路径

方法描述
fill()
填充当前绘图(路径)。
stroke()
绘制已定义的路径。
beginPath()
起始一条路径,或重置当前路径。
moveTo()
把路径移动到画布中的指定点,不创建线条。
closePath()
创建从当前点回到起始点的路径。
lineTo()
添加一个新点,然后在画布中创建从该点到最后指定点的线条。
clip()
从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()
创建二次贝塞尔曲线。
bezierCurveTo()
创建三次贝塞尔曲线。
arc()
创建弧/曲线(用于创建圆形或部分圆)。
arcTo()
创建两切线之间的弧/曲线。
isPointInPath()
如果指定的点位于当前路径中,则返回 true,否则返回 false。

转换

方法描述
scale()
缩放当前绘图至更大或更小。
rotate()
旋转当前绘图。
translate()
重新映射画布上的 (0,0) 位置。
transform()
替换绘图的当前转换矩阵。
setTransform()
将当前转换重置为单位矩阵。然后运行 transform()。

文本

属性描述
font
设置或返回文本内容的当前字体属性。
textAlign
设置或返回文本内容的当前对齐方式。
textBaseline
设置或返回在绘制文本时使用的当前文本基线。

 

方法描述
fillText()
在画布上绘制"被填充的"文本。
strokeText()
在画布上绘制文本(无填充)。
measureText()
返回包含指定文本宽度的对象。

图像绘制

方法描述
drawImage()
向画布上绘制图像、画布或视频。

像素操作

属性描述
width
返回 ImageData 对象的宽度。
height
返回 ImageData 对象的高度。
data
返回一个对象,其包含指定的 ImageData 对象的图像数据

 

方法描述
createImageData()
创建新的、空白的 ImageData 对象。
getImageData()
返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据。
putImageData()
把图像数据(从指定的 ImageData 对象)放回画布上。

合成

属性描述
globalAlpha
设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation
设置或返回新图像如何绘制到已有的图像上。

其他

方法描述
save()保存当前环境的状态。
restore()返回之前保存过的路径状态和属性。
createEvent() 
getContext() 
toDataURL() 



链接: https://fly63.com/article/detial/9809

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。

原生js使用canvas实现图片格式webp/png/jpeg在线转换

javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。

离屏Canvas — 使用Web Worker提高你的Canvas运行速度

现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力

js用canvas实现简单的粒子运动

在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察

Canvas 点线动画案例

canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径

Canvas在移动端绘制模糊的原因与解决办法

由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!