29行代码使用HTML5 Canvas API绘制一颗红心

源代码：

<html><div style="width:200px;height:200px;"id="cloud">test canvas</div>
<canvas style="display:none;"id="can"width="200"height="200"></canvas>
<script>(function() {var canvas = document.getElementById('can'), context;if(!canvas.getContext) {alert('你的浏览器不支持 canvas!');return;}context = canvas.getContext('2d');context.fillStyle = 'red';context.beginPath();context.moveTo(75,40);context.bezierCurveTo(75,37,70,25,50,25);context.bezierCurveTo(20,25,20,62.5,20,62.5);context.bezierCurveTo(20,80,40,102,75,120);context.bezierCurveTo(110,102,130,80,130,62.5);context.bezierCurveTo(130,62.5,130,25,100,25);context.bezierCurveTo(85,25,75,37,75,40);context.fill();var url = context.canvas.toDataURL();document.getElementById('cloud').style.backgroundImage = 'url("' + url + '")';
})();
</script>
</html>

效果如下：

实现原理：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

29行代码使用HTML5 Canvas API绘制一颗红心相关推荐

html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
clear html5代码,用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
在现实世界中,我们使用画笔在画板上进行绘画:在html5 canvas中,我们同样可以使用canvas的画笔--CanvasRenderingContext2D对象在canvas上进行绘画.众所周知, ...
html五绘制弧线的方法是,使用HTML5 Canvas API绘制弧线的教程
绘制标准圆弧在开始之前,我们优化一下我们的作图环境.灵感来自于上节课的纹理,如果不喜欢这个背景,我在images目录下还提供了其他的背景图,供大家选择.另外把所有的样式表都写在了下.JavaScr ...
HTML5 学习手笔二：canvas API 绘制树形图案A
上篇通过对canvas 画对角线,了解了一些canvas画图基本原理.现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林. 本篇大纲用canvas API绘制树木的树冠为 ...
HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
html绘制动态小人,JavaScript和html5 canvas如何绘制一个小人的代码
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下本文实例讲述了J ...
html5 Canvas API
2.1 Canvas 概述 Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小.此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间. ...
应用html5画布Apicss制作,程序设计HTML5 Canvas API
复制代码代码如下: try { document.createElement("Canvas").getContext("2d"); document.get ...
java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...

29行代码使用HTML5 Canvas API绘制一颗红心

29行代码使用HTML5 Canvas API绘制一颗红心相关推荐

最新文章

热门文章