التعليق: الفكرة الرئيسية المتمثلة في حفظ محتوى HTML5 Canvas كصورة هي استخدام API الخاصة بـ Canvas - Todataurl () لتنفيذها. التنفيذ المحدد هو كما يلي. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا لك.
الفكرة الرئيسية هي استخدام واجهة برمجة تطبيقات Canvas الخاصة - Todataurl () لتنفيذ التنفيذ بأكملهرمز HTML + JavaScript بسيط.
<html>
<meta http-equiv = "x-ua- متوافقة مع المحتوى =" chrome = 1 ">
<head>
<script>
window.onload = function () {
يرسم()؛
var saveButton = document.getElementById ("SaveImageBtn") ؛
BindButTonevent (SaveButton ، "Click" ، SaveImageInfo) ؛
var dlbutton = document.getElementById ("downloadImageBtn") ؛
BindButtOnevent (Dlbutton ، "Click" ، SeveaslocalImage) ؛
} ؛
وظيفة draw () {
var canvas = document.getElementById ("thecanvas") ؛
var ctx = canvas.getContext ("2d") ؛
CTX.FillStyle = "RGBA (125 ، 46 ، 138 ، 0.5)" ؛
CTX.FillRect (25،25،100،100) ؛
ctx.fillstyle = "rgba (0 ، 146 ، 38 ، 0.5)" ؛
CTX.FillRect (58 ، 74 ، 125 ، 100) ؛
ctx.fillstyle = "rgba (0 ، 0 ، 0 ، 1)" ؛ // اللون الأسود
ctx.filltext ("Glarmyfish - Demo" ، 50 ، 50) ؛
}
وظيفة bindbuttonevent (عنصر ، نوع ، معالج)
{
if (element.addeventListener) {
element.addeventListener (النوع ، معالج ، خطأ) ؛
} آخر {
element.attachevent ('on'+type ، handler) ؛
}
}
وظيفة SaveImageInfo ()
{
var mycanvas = document.getElementById ("thecanvas") ؛
var image = mycanvas.todataurl ("image/png") ؛
var w = window.Open ('about: blank' ، 'Image from canvas') ؛
w.document.write ("<img src = '"+image+"' />